WHAT'S NEW?
Loading...
Showing posts with label CSS 3. Show all posts
Showing posts with label CSS 3. Show all posts
Last chapter of this collection of posts about HTML5 and CSS3. In this one, I will continue talking about more CSS3 and the different new features we can use in our web desings.

One very interesting new feature in CSS3 is "rounding corners". Until now, when the desingers wanted to create rounding corners they use to work with different images to simulate this effect. With CSS3 and the property border-radius, you just need to declare the raidus for the corners, ex:

#content {
 margin-left: 20px;
 float: left;
 background-color: #ffffff;
 border-radius: 10px;
}

Unfortunately, some browsers don't support this feature and you need to declare the feature with other parameters (by adding a prefix like -moz or -webkit depends on the browser). Here you have a table with some features supported and not:

  • border-radius: IE, Firefox (-moz-), Chrome (-webkit-), Safari (-webkit-), Opera
  • box-shadow: IE, Firefox (-moz-), Chrome (-webkit-), Safari (-webkit-), Opera
  • text-shadow: IE (NO), Firefox, Chrome, Safari, Opera
  • opacity: IE, Firefox, Chrome, Safari, Opera
  • gradient: IE (NO), Firefox (-moz-), Chrome (-webkit-), Safari (-webkit-), Opera (NO)
  • multiple background-image: IE, Firefox, Chrome, Safari, Opera


Here we go, this time with more style: CSS3

If HTML5 is the natural evolution of the Web to produce documents more rich and semantic, Cascade Style Sheets 3 (CSS3) are the evolution of this other standard. Until now, we have used CSS as a tool to apply format to the content of a web page, to create our custom layout or other particular effect. With CSS3 we can get interesting effects that we were able to produce with other platforms like JavaScript or Flash.

As you realised in other posts regarding HTML5, these specifications are not completely finished and for CSS3 happens the same. This means, we will probably face that some of the new features of CSS3 are not implemented in some browsers and we should take care of it. Let's take a look to all of these features in CSS3 that we can use now.


The multimedia content is very important in web, you can use several plugins like Adobe Flash or Microsoft Silverlight to draw what you want, but these are proprietary components and the idea in HTML5 is to bring enough tools to the developer to be able to do it native in the browser. In this post we are going to talk about the Canvas element. This new tag provided by HTML5 allows you to add a region in your website to draw whatever you want. We need to add the canvas tag inside the <body> part and define the dimensions an id because we will use JS to. We can write a text between the open and close tags to show it when the browser can’t render our drawing. If you don't add the dimensions attributes then a canvas 300x150 will be created. Here an example: 


     Alternative content to canvas element.



Once we have declared the element in our html file we need to draw something using JS. Here I enlcose some code to draw a line inside the canvas. 

    
function draw() {
        var canvas = document.getElementById("board");
        if (canvas.getContext) {
            var context = canvas.getContext("2d");
            context.beginPath();
            context.moveTo(10, 10);
            context.lineTo(100, 100);
            context.stroke();
        }
    }
    window.onload = draw;



In this new post I want to focus on forms made by HTML5 and the new native functions provided to validate them. This does not mean that we don't need to validate the input written by the user in the server, but is a first filter. HTML5 provides you the way to create forms in an easier way: you can declare required fileds, specific data types like dates or emails and new components like date time pickers, progress bars, color selectors and everything without using javascript.

For your input tags you can declare several new "type" property like:
  • type = "search": specific text field for searchs. Actually is more an aestetic improvement rather than a new feature.
  • type = "tel": is a text box for phone numbers. Indeed, HTML allows you to write numbers and letters but some browsers show a numeric interface for phone numbers.
  • type = "email": specific control for email addresses.
  • type = "color": customized control for color selection.
  • type = "url": it allows you to write just URL addresses. It works in the same way as the "email" type.
  • type = "number": specific just for numbers, no letters. You can declare a "min" and "max" value to create a range for the user. The "step" attribute declare the increment or decrement each time.
  • type = "date" "time" "datetime" "datetime-local" "month" "local": all are prepare to control inputs related with dates and times. Just by showing a calendar.
  • type= "range": it's a flow control that represents a numeric value.


In this second part of our introduction to HTML5 we want to focus on main structural elements. We will use a classic blog to show you how to migrate your HTML&CSS code. The first thing "todo" is simple: say the browser you are using HTML5. We do it with the following tag at the top of our page: <!DOCTYPE HTML>. Much easier than older HTML and XHTML versions. Another important point if your site is not in english, is use the "lang" attribute in the <html> tag like here: <html lang="es"></html>. Finally, we need to declare the character definition used <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> or simply <meta charset="UTF-8">. Example:

<html lang="es">
   <head>
      <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
   </head>
</html>

Back to HTML5 structural elements, just take a look to this blog. Is splitted (by <div> and CSS) in different parts: a header with the title of the blog, navigation with several links, content of each post (each post has also header, content, footer, comments,...), the footer at the end of the page... You can use <div> tag for everything you want. HTML5 adds new tags: header, footer, nav, article, section... to avoid use div for all. This doesn't mean you don't need div anymore, it is very usefull to add styles for example, but now, the browser knows what is the purpose of every section of the blog. In the image below you can compare HTML structural elements:


I want to start a chain of posts about the new features and how to use them in HTML5 and CSS3. You probably have heard about it, but maybe didn't read so much. These two elements are web standards for developers and they have arrived to replace (X)HTML 4.01 and CSS 2.1. Here the chapters of this course:



Still a beta, HTML5 and CSS3 have some new features you should know:

  • HTML5
    • New tags to represent some content in you web.
    • Delete tags without meaning because of CSS.
    • New elements to create animations or play sound or video without addins (Flash, Silverlight,...)
    • Form structure improvement and native validation
    • ...
  • CSS3
    • New selectors
    • Advanced design: round corners, gradients, multiple background images,...
    • HSL colour and oppacity
    • Fonts and WOFF format
    • Transitions, transformations and animations


Follow:

Created by ThemeXpose