background preloader

50 Useful CSS Snippets Every Designer Should Have

50 Useful CSS Snippets Every Designer Should Have
With so many new trends advancing every year it can be difficult keeping up with the industry. Website designers and frontend developers have been deeply ingrained into the newer CSS3 properties, determining the ultimate browser support and quirky hacks. But there are also brilliant CSS2 code snippets which have been unrequited in comparison. For this article I want to present 50 handy CSS2/CSS3 code snippets for any web professional. These are perfect for storing in your development IDE of choice, or even keeping them saved in a small CSS file. Either way I am sure designers & developers can find some use for some of the snippets in this collection. Recommended Reading: 20 Useful CSS Tips For Beginners 1. Basic CSS browser resets are some of the most common snippets you’ll find online. 2. This clearfix code has been around the Web for years circulating amongst savvy web developers. 3. 2011 Updated Clearfix 4. Code Source 5. Code Source 6. 7. Code Source 8. Code Source 9. 10. 11. Code Source

Related:  CSS3CSS3CSS & Sass Tita CréaPrincipesCCS info, generadores y códigos

CSS 3 Menu Rotation Tutorial Objective Main objective of this post is to give you How to use CSS 3 in Menu Rotation Step 1 Introduction The Future Generation of CSS Selectors: Level 4 Back in January 2014 I wrote the article The Current Generation of CSS3 Selectors. The goal of that article was to introduce the new generation of selectors that often fell under the “CSS3” umbrella. That group of selectors has been well documented in a lot of places, and browser support for those features is quite strong (all browsers including IE9+). The future of CSS selectors is also looking bright, with the Selectors Level 4 specification currently in Working Draft status, and an Editor’s Draft of the same spec still in progress (the editor’s draft is generally viewed as more authoritative). This article will focus on the new selectors not discussed in my previous article. Browser support for many of these is pretty poor, so I don’t recommend using many of these in production.

CSS Snippets (Tips 2) CSS is the underlying language that gives websites its look. Although CSS is a straightforward language and easy to learn, it can be difficult to harness in some cases. Nothing to fear, there are workarounds that you can find online, and here are but just 10 handy ones that you can use. If you want to wrap long text, autoadjust the width of your table columns, or create a simple loading state without the use of Gifs, we have the snippets that will deliver, and more. Fullscreen Background Image Slideshow with CSS3 Happy new year, everybody! Today we will create a CSS-only fullscreen background image slideshow. We'll create different image transitions and also make a title appear using CSS animations. View demo Download source efectos CSS If you are looking for in-depth articles on the inner workings of flexbox, or a comprehensive explanation for using CSS regions, then this is definitely not the post for you. Instead, we have squarely put our focus on those CSS tutorials that not only make the smaller details of the web visually appealing, but are also really useful. You know what we mean… fantastic text effects, innovative button styles, space-saving navigation systems, subtly animated form elements… that kind of thing. We have organised the tutorials and techniques into the following categories: Typography Techniques; Button Tutorials, Menu &amp, Navigation Techniques, Form Element Tutorials, SVG &amp, CSS Styling Techniques, Styling Anchor Links, Web Page Components Tutorials, CSS Layout Techniques, and finally a mixed bag of cool miscellaneous tutorials. Here you go… Typography Techniques & Styles

colors » CSS INTENSIVSTATION Farbnamen, Angaben in Hexadecimal, RGB, RGB(A), HSL, HSL(A), all diese Angaben sind heute im täglichen Einsatz anzutreffen. RGB(A) & HSL(A) sind Definitionen der W3C-CSS3 Recommendation (Empfehlung). Alphatransparenz wird ab IE9+ dargestellt. Nicht alle Browsern unterstützten zur Zeit alle Empfehlung. Farbnamenbackground-color: red; Hexadecimalbackground-color: #fff; RGB (red, green, blu) background-color: rgb(255,255,255); RGBA (red, green, blu, alpha) background-color: rgba(255,255,255,0.7); HSL (Hue, Saturation, Lightness) background-color: hsl(100,35%,65%); HSLA (Hue, Saturation, Lightness, Alpha) background-color: hsla(100,35%,65%,0.5);

How To Make A Bio Dropdown Box With CSS After I released the most recent Theme Lab redesign, I had a number of comments on the “bio dropdown” box I have up in my navigation bar. I coded it with just a few lines of CSS along with a background image. In this CSS tip post, I’ll go over how you can have a similar hover effect on your own sites. The Example In this example, I’ll be using a text widget in the Twenty Eleven theme, the new default as of WordPress 3.2. Basically, once you hover over the div that contains the widget, a “hidden” div will appear which will be our bio dropdown box.

Generador CSS de formularios y otros elementos Its handy and easy-to-use UI allows you to adjust rich graphical styles quickly and without coding. The main features: 2D and 3D transformsmultiple complex transitionsmultiple linear and radial gradientsmultiple box and text shadowscustom fonts (including google fonts)and much moreYou’ll be able to play with all EnjoyCSS parameters just like in photoshop or illustarator (with sliders, colorpickers and etc) combining all possible CSS3 style capabilities for the same element. Creating a Responsive Menu In this tutorial I'm going to show you how to create one of the responsive menus from our website. You can find the menu here. So, the final result will look like this: The Markup

Beautiful Photo Stack Gallery with jQuery and CSS3 The Night Top Cat! The most effectual Top Cat! Who's intellectual close friends get to call him T.C., providing it's with dignity.Top Cat! The indisputable leader!