10 Things CSS3 & HTML5 Will Teach Us. While we are all squirming in our seats waiting for the official release and support of HTML5 and CSS3, I’d thought I’d share with you some interesting things about both.
We can all look at a boring list of the features of both, but they don’t really tell us how front end development is going to change. Although I’m super excited about how much easier it’s going to make my coding, I’m also somewhat nervous as there’s going to be a HUGE learning curve (especially for CSS3), even if it’s just to our coding habits. Here are 10 great things that both CSS3 and HTML5 are going to teach us very soon. 1. Effects Aren’t Just For Photoshop & Images Anymore As it is now, every time we want to do some cool effect, what do we have to do?
Opacity – we can now control the opacity of an color (or an image without making it a PNG)Drop Shadow – with the box-shadow style we can now add fancy drop shadows to our divs and text! The Basics of CSS3. Last week I posted a CSS3 dropdown menu and someone complained that I didn't explain the CSS code in detail.
Well, here is a post on the basics of the new properties: text-shadow, box-shadow, and border-radius. These CSS3 properties are commonly used to enhance layout and good to know. The first three values are RGB color values and the last value is the level of the transparency (0 = transparent and 1 = opaque). RBGA can be applied to any properties associated with color such as font color, border color, background color, shadow color, etc. Text Shadow Text shadow is structured in the following order: x-offset, y-offset, blur, and color; Set a negative value for x-offset to shift the shadow to the left.
You can also specify a list of text-shadow (separated by a comma). Text-shadow: 0 1px 0 #fff, 0 -1px 0 #000; Border Radius The shorthand for border radius is similar to the padding and margin property (eg. border-radius: 20px). You can specify each corner with a different value. 3D Cube using new CSS transformations. 11 Classic CSS Techniques Made Simple with CSS3. We've all had to achieve some effect that required an extra handful of divs or PNGs.
We shouldn't be limited to these old techniques when there's a new age coming. This new age includes the use of CSS3. In today's tutorial, I'll show you eleven different time-consuming effects that can be achieved quite easily with CSS3. I'm sure you've heard of CSS in general. CSS3 isn't that much different, in terms of syntax; however, the power of CSS3 is much greater. Here's what the official (or at least, what I consider official) website of CSS3, css3.info, has to say about CSS3: CSS3 is the new kid in the stylesheet family. Here are the 11 techniques that I'll be showing you how to recreate with CSS3. Probably my favorite on of this list, rounded corners provide a developer with so many options.
You can simulate rounded corners by using four extra divs or by using JavaScript. The classical method uses jQuery along with a JavaScript plugin called Corners. View the demo. View the demo. View the demo. 5 Simple, But Useful CSS Properties. This post is about 5 useful CSS properties that you should be very familiar with, but will most likely rarely use. I'm not talking about the new fancy CSS3 properties. I'm referring to the old CSS2 properties such as: clip, min-height, white-space, cursor, and display that are widely supported by all browsers.
So, don't miss this post because you might be surprised how useful they are. 1. CSS Clip The clip property is like a mask. Image Clip Example (demo) The following example shows you how to mask an image using clip property. Image Resize and Clip (demo) In this example, I'm going to show you how to resize and clip images. 2. The min-height property allows you to specify the minimum height of an element.