background preloader

50 New Useful CSS Techniques, Tutorials and Tools

50 New Useful CSS Techniques, Tutorials and Tools
Advertisement These are great times for front-end developers. After months of exaggerated excitement about HTML5 and CSS3, the web design community now starts coming up with CSS techniques that actually put newly available technologies to practical use instead of abusing them for pure aesthetic purposes. We see fewer “pure CSS images” and more advanced, clever CSS techniques that can actually improve the Web browsing experience of users. In this post we present recently released CSS techniques, tutorials and tools for you to use and enhance your workflow, thus improving your skills. CSS Techniques Now Playing: transitions and animations with CSSTim Van Damme showcases a fairly simple CSS design that uses transitions, animations and subtle hover-effects to produce an engaging user experience. CSS3 range slider, checkbox + radio buttonA demo of HTML input elements made with CSS3. CSS3 Media QueriesCSS2 allows you to specify stylesheet for specific media type such as screen or print.

Creating Interactive Fictional UI With CSS3 In today’s article we will create an interactive fiction user interface (UI) coded with CSS transforms and transition properties. The idea is to have a button and reveal more information when mouse over on it. You can check out the demo before you proceed to the next section. View Demo Cool right? HTML Structure We will have a simple HTML structure with several division where each one contains title and description. As you can see above, each menu object “menu_obj” division contains extra classes such as “home”, “profile” and “contact” that gives us freedom to define background image with CSS later. Home Button Profile Button Contact Button Hover State Ok. CSS Style Let’s define the style for each buttons and its child. First of all, we have given the width, height for each “menu_obj”; apply inner and outer drop shadows; and define the transition type and its duration. The title element has scale up 5 times, and 0 opacity. The content division will fade in and scale up to 1. That’s it! Conclusion

How to Create a CSS3 Mega Drop-Down Menu Topic: CSS3Difficulty: IntermediateEstimated Completion Time: 1 hour Hello guys! In this tutorial I will teach you how to create a pure CSS3 Mega Menu. Mega Menus are usually used on corporate/e-commerce websites, but they become more popular because they are a great way to display/organize content. HTML Markup Create an unordered list with the class “nav” (<ul>), then for each menu item we will add a new list item (<li>) with an anchor tag (<a>) inside. Reset and Container Basic Styles As the default styles of the browsers differ from each other, we’ll add some reset styles to keep consistency between them and avoid future issues. Then we will add some basic styles to the menu container and float the list items to the left in order to show them on the same line. Styling the Menu Links We will start with the common styles like padding, height, position, etc. For the hover state we will only change the background color. Styling the Search Form The Mega Dropdowns Some Content Download Files

13 Pure CSS Techniques for Creating JavaScript-like Interactions | Tutorials We all know that JavaScript allows us to do great things when it comes to user interfaces, but with a little imagination and creativity, the same types of effects can be created with only CSS. Here are 13 tutorials that teach you how to push the limits of CSS and make it do things that we’re not accustomed to it doing. You’ll notice that some of these techniques can be very useful, while others are simple for proving it can be done. How To Create a Pure CSS Polaroid Photo Gallery Creating a Bubble Coda Style with CSS3 Accordion using only CSS How to Create a Fancy Image Gallery with CSS3 CSS3 Hover Tabs without JavaScript Create a JQuery Content Slider Using Pure CSS How to Create a Valid Non-Javascript Lightbox Pure Css Data Chart Bubble Effect with CSS CSS Image Switcher Pure Css Line Graph CSS Image Switcher Pure CSS Timeline

Creating a Mouseover Fade Effect with jQuery My last little jQuery tutorial was an alternative to using CSS to create an image change on a mouseover. Now I want to take that one step further and add a fade effect. For my example, I am going to make a black and white image fade into a color image. Add the jQuery script between your head tags. Here is the function. Here is the CSS. And here is the body code. All together you got something that looks like this. Test it out below: NOTE: If you are using jQuery with WordPress, you need to replace all the dollar signs ($) with the word jQuery due to other Javascript libraries that use the dollar sign.

Collection of Useful Open Source CSS Resources There are loads of free scripts to download and include in your website projects. Developers are constantly releasing their work under open source General Public Licenses. This allows other developers to work off the same code and even customize pieces to better suit their project’s needs. But I will say there are some newer CSS libraries and resources which are extremely beneficial to most frontend developers. 1. IVORY is a frontend CSS framework for building responsive grids in web design. Visit Website → 2. I found this resource just a few weeks ago and it has proven to be incredibly helpful. Visit Website → 3. If you have ever seen longer hidden anchor links on Github you will notice how they slide out to display the full text. Visit Website → 4. Workless is a clean HTML5 and CSS3 framework for web developers. Visit Website → 5. This unique Codepen demo page includes a lot of custom CSS3 checkbox styles. Visit Website → 6. Visit Website → 7. Visit Website → 8. Visit Website → 9. 14. 15.

MicroTut: Centering a Div Both Horizontally And Vertically Martin Angelov While building web page layouts, you’ve probably been faced with a situation where you need to center a div both horizontally and vertically with pure CSS. There are more than a few ways to achieve this, and in this MicroTut I am going to show you my favorite involving CSS and jQuery. But first, the basics: Horizontal centering with CSS It is as easy as applying a margin to a div: To center a div only horizontally, you need to specify a width, and an auto value for the left and right margins (you do remember the shorthand declarations in CSS don’t you?). Horizontal and vertical centering with CSS Center a div both horizontally and vertically with CSS is a bit more tricky. By positioning the element absolutely, we can detach it from its surroundings and specify its position in relation to the browser window. Horizontal and vertical centering with jQuery As mentioned earlier – the CSS method only works with divs with fixed dimensions. by Martin Angelov Articles

Advanced CSS Menu Last tutorial, I showed you how to design a watercolor effect menu in Photoshop. This tutorial I will show you how to slice up the menu design (step by step) and put them together with CSS. Most of you probably know how to code a horizontal or vertical CSS list menu. Now let's take it to the next level — code an advanced (un-typical) list menu utilizing the CSS position property. View Demo CSS menu Download Demo ZIP Overview Here are the required graphics to assembe the menu (you can download from the zip). 1. Open the Photoshop file. 2. Turn off the background Layer Group and leave only the menu text layers visible. Create a new file and take note of the file dimension (w x h), in my case the "home" graphic is 144 x 58px. Here is how the hover effect will work. Repeat this step for the other buttons. 3. When you are done with the graphics, let's start coding. #menu Reset the menu to no padding, no margin, and no list-style. #menu span #menu a The key point here is the text-indent property.

35 Useful CSS3 Tutorials To Boost Your Skills Good CSS3 tutorials can teach you the tricks and techniques used by experienced web designers and developers to implement a specific solution. Looking the experts over the shoulders is also a great way to pick up fresh inspiration and further to see that something your client is asking for can actually be done. A great CSS3 tutorial providing clever solutions to requirements you need to fulfill may be a great time saver and therefore may kick-start a project. CSS is for styling and controlling layout of webpages. In this article we have collected some of the best CSS3 tutorials we have been able to find. Advertisement Create an animated 3d bar chart using CSS3 This is a tutorial on how to create an animated 3d bar chart using CSS only. Enhancing your Image Thumb Galleries using CSS3 Transitions and Transforms (Responsive) You may enhance the user experience across browsers with the techniques explained in this tutorial. How to create some cool CSS3 buttons CSS3 pricing table CSS3 breadcrumbs

10 Random CSS Tricks You Might Want to Know About CSS is the fundamental way of styling our web pages. Its deceptively easy syntax allows us to do many things to affect the visual layer of our work. And especially with CSS3, the language has gotten even more powerful. There are many useful CSS techniques and tricks out there for you to take advantage of. 1. If you would like to use relative units (em) for your font sizes, declaring 62.5% for the font-size property of the body will make it easier to convert px to em. 2. When you focus (:focus) on an input element, perhaps you have noticed that Safari adds a blue border around it (and Chrome, a yellow one). If you would like to remove this border outline, you can use the following style rule (this removes the outline from text fields): Please note that outline is used for accessibility purposes so that it is easier to see what input field is active. 3. For progressive enhancement, you could use the transform property that is supported by many browsers that have CSS3 support. 4. 5. 6. 7. 8.