Using CSS gradients - Web developer guide CSS gradients are new types of <image> added in the CSS3 Image Module. Using CSS gradients lets you display smooth transitions between two or more specified colors. This lets you avoid using images for these effects, thereby reducing download time and bandwidth usage. In addition, because the gradient is generated by the browser, objects with gradients look better when zoomed, and you can adjust your layout much more flexibly. Browsers support two types of gradients: linear, defined with the linear-gradient() function, and radial, defined with radial-gradient(). Linear gradients To create a linear gradient, you set a starting point and a direction (specified as an angle) along which the gradient effect is applied. Simple linear gradients Here's a linear gradient that starts at the center (horizontally) and top (vertically), and starts blue, transitioning to white. background: -prefix-linear-gradient(top, blue, white); background: linear-gradient(to bottom, blue, white); Using angles Size
Developing Your Own CSS Framework Quite a few CSS frameworks have been around for a while, but most web developers avoid using them. Instead most veteran developers prefer to create their own CSS framework, which provide benefits of a personalized solution and minimizes negative aspects of depending on a third party solution. Although CSS frameworks are meant to enable rapid web development; developing your own comprehensive CSS framework may require significant amount of time and effort. This article will provide you with guidelines & carefully selected resources to assist you during this process. Before You Begin First try few popular CSS frameworks or at-least go through the documentation to see what they offers: You may also want to check Definitive List of CSS Frameworks. Why Build Your Own CSS Framework? CSS plays a vital role in modern web design, and it is not really too difficult to learn. Let’s Begin – Divide & Rule First of all reject the idea that developing your own CSS framework is going to be complex task.
Quick Fun: CSS3 Filter Effects « GirlieMac! Blog I quickly played with the brand-new CSS Filter Effects on the latest WebKit Nightly! (Edited: Now also supported on Chrome Canary 18.0.976.0 +) Click the images to view in the full size. This is a default google.com screen. blur(radius) to create Gaussian blur -webkit-filter: blur(2px); The default is 0, no blur. brightness(amount) -webkit-filter: brightness(30%); The default is 100%. Updated: I am not sure when it has modified, but it seems that not the accepted value is the range between -100% (dark) and 100% (light), and the default is 0. contrast(amount) -webkit-filter: contrast(30%); grayscale(amount) -webkit-filter: grayscale(); The default is 100%. sepia(amount) invert(amount) -webkit-filter: invert(); opacity(amount) -webkit-filter: opacity(30%); The default is 100%, no transparency. Saturate(amount) -webkit-filter: saturate(50%); Saturate(amount) – the amount over 100% is also allowed. -webkit-filter: saturate(300%); hue-rotate(angle) -webkit-filter: hue-rotate(90deg); The default is 0deg. drop-shadow(
CSS Gradients This article was originally published on March 2, 2010. It was updated April 1, 2011, July 20, 2011, and again March 3, 2014, each time to clarify and correct browser prefixes and best practices. Just as you can declare the background of an element to be a solid color in CSS, you can also declare that background to be a gradient. Using gradients declared in CSS, rather using an actual image file, is better for control and performance. Gradients are typically one color that fades into another, but in CSS you can control every aspect of how that happens, from the direction to the colors (as many as you want) to where those color changes happen. Let's go through it all. Gradients are background-image While declaring the a solid color uses background-color property in CSS, gradients use background-image. Linear Gradient Perhaps the most common and useful type of gradient is the linear-gradient(). Not declaring an angle will assume top-to-bottom: This "to" syntax works for corners as well. like:
W3Schools CSS Creative CSS3 Animation Menus Being in the mood for experimenting with CSS3, I'd like to show you some creative menu hover effects in today's tutorial. The idea is to have a simple composition of elements, an icon, a main title and a secondary title, that will be animated on hover using only CSS transitions and animations. We'll be exploring some different effects for the elements. View demo Download source Being in the mood for experimenting with CSS3, I’d like to show you some creative menu hover effects in today’s tutorial. The icons used in the demos are actually a Web Symbols typeface that we’ll include with @font-face. The Markup The HTML structure for the menu will be an unordered list where each item is a link element that consists of an icon span and a content div that will contain the main title and the secondary title: As we are using a symbol font for the icons, we write letters for the icons. The CSS The common style for all the examples will be the inclusion of the symbol typeface: Example 1 Example 2
Stripes in CSS Stripes are pretty easy to do in CSS these days. CSS gradients via the background-image property really got our back. I thought I'd document some variations in one easy to reference place. Normal Colored Diagonal Stripes Diagonal stripes are easy to pull off thanks to repeating-linear-gradient(): background: repeating-linear-gradient( 45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px ); Rather than the very last color-stop being 100% (or nothing, which means 100%) it's a fixed value. Gradient Diagonal Stripes If you make the background a regular linear-gradient(), and then make half the stripes totally transparent using repeating-linear-gradient(), it can appear as if the stripes have gradients. background: /* On "top" */ repeating-linear-gradient( 45deg, transparent, transparent 10px, #ccc 10px, #ccc 20px ), /* on "bottom" */ linear-gradient( to bottom, #eee, #999 ); Stripes Over Image Perhaps a texture? Any Direction, Any Angle It doesn't have to be exactly 45degrees. Vertical Stripes
7 Great CSS Text Effects Time for a bit of fun with CSS!The following examples are all created using live text and the CSS text-shadow property. Apart from the Letterpress effect, all of the following examples make use of multiple shadows, and as such will only work on the following browsers. Firefox 3.1+ (Mac/Win/Lin)Safari 4+ (Mac/Win)Chrome (Mac/Win)Opera 9.5+ (Mac/Win/Lin) Unfortunately Internet Explorer (6/7/8) has no support for the text-shadow property. If you're not familiar with the text-shadow property here's a example and explanation: It breaks down like this: create a shadow below the h1 and offset it -2px horizontally, 2px vertically, blur it by 3px, and colour it pink. 1 Classic Letterpress Effect This is a very simple effect to achieve. 2 Cloudy Text Effect This effect relies on multiple text shadows and rgba colours. Basically, that's white in rgb, (255,255,255) at 50% transparency (0.5). 3 Embossed Text Effect To Create the Embossed look, I used 2 diagonally offset shadows. 4 City Lights Text Conclusion
CSS3 2D Transformations The Transformation module is a tremendous addition in CSS3, it takes the way we manipulate elements on a website to the next level. There are some experiments that really amaze me, examples such as this one. However, we are not going to build something like a CSS-only icon that can somehow transform into an Autobot, as it may be overwhelming and not quite usable in real life as well. Instead, this time, we will be stepping back and reviewing the basics of CSS3 2D Transformations to see how it works at a fundamental level. The Syntax The CSS3 Transformations module basically allows us to transform an element to a certain extent such as translating, scaling, rotating and skewing. The official syntax is transform:method(value). transform: method(value); -o-transform: method(value); -ms-transform: method(value); -moz-transform: method(value); -webkit-transform: method(value); The Value Most of the method’s value will correspond to the X-axis and Y-axis. Except for rotations. I – Translate
Quick Tip: Understanding CSS3 Gradients Creating an image only for the purpose of displaying a gradient is inflexible, and is quickly becoming a bad practice. Unfortunately, at the time of this writing, they very well might still be required, but hopefully not for much longer. Thanks to Firefox and Safari/Chrome, we can now create powerful gradients with minimal effort. In this video quick tip, we'll examine some of the differences in syntax when working with the -moz and -webkit vendor prefixes. While Mozilla and Webkit generally adopt the same syntax for CSS3 properties, they unfortunately don't quite agree when it comes to gradients. Don't worry if your eyes gloss over at that syntax; mine did too! What type of gradient? Firefox, which implemented gradient support with version 3.6, prefers a slightly different syntax. Note how we've placed the type of gradient, linear, within the vendor extension. What if you don't need a 100% gradient from one color to another? Note the subtle off-white to white gradient at the top.
Responsive CSS Frameworks and Boilerplates Explained CSS frameworks have been around for years now, but the arrival of responsive design practices has rendered many of our old favorites useless. Fortunately, lots of really talented developers have jumped in to fill the gap with the next generation of CSS frameworks and boilerplates. There’s already a ton of these things floating around. Gumby The Gumby framework takes the 960 grid that we all cut our teeth on years ago and brings it into the modern age of web design with a responsive touch. The Semantic Grid System If you hate grid systems and their bloated, non-semantic markup, this one is for you. Gridless Gridless is a powerful boilerplate that uses mobile first responsive web design to adapt itself to the device’s width. Frameless Frameless is difficult to classify because it’s technically more of a recommended way of approaching responsive design than an actual set of files that you can download. Proportional Grids The Goldilocks Approach Twitter Bootstrap Foundation from ZURB Skeleton Wirefy
CSS3 Transitions, Transforms and Animation Tutorial