In this tutorial we are going to create two HTML5 forms that will switch between login and registration using the CSS3 pseudo class :target. We will style it using CSS3 and an icon font. The idea behind this demo is to show the user the login form and provide a link to “switch” to the registration form.
This is a different take on Responsive Web design. This article discusses how we can better embrace what the Web is about by ignoring the big elephant in the room; that is, how we can rely on media queries and breakpoints without any concern for devices.
Today we’ll show you how to create a content navigator with CSS only. The idea is to have several slides or content layers that we’ll show or hide using the :target pseudo-class. With CSS transitions we can make the slides appear in a fancy way. We’ll also make the whole thing responsive.
Please note: the result of this tutorial will only work as intended in browsers that support the CSS properties in use.
If you’re looking for some great ways to improve your WordPress workflow, read on for a massive collection of free themes, plugins, tools and tutorials. These resources were all linked via the Smashing Magazine Twitter stream, Facebook stream, and other social-media streams around the Web.
Bruce Lawson, open web standards evangelist for Opera, looks at some nifty new browser technologies that are not part of HTML5, including WebGL and SVG. There are loads of exciting technologies coming just around the corner. By the time you've come to grips with the ones we've discussed above, it'll be time to worry about a whole load more. Have fun; remember to test in as many browsers as possible.
Steven Bradley has been discussing ideas and approaches to writing CSS. He's looked at abstracting CSS and talked in some detail about Object Oriented CSS. If classic CSS sits on one side of an approach to writing CSS and OOCSS sits on the other, SMACSS sits somewhere in the middle. While he’ll do his best to cover the basics here, he recommends reading through the SMACSS documentation. It’s not a long read and of course it is the original source.
With CSS3, developers and designers can utilize an enhanced range of options for Web page backgrounds. New options include the ability to use multiple background images, to specify size properties for background images, and to define background origin and clipping in terms of the CSS box model.
The HTML5 Server-Sent event model allows you to push realtime data updates from the server to the browser. In this tutorial we will work through the process, with the EventSource object handling received data and writing it to the page. We will use HTML5 and JavaScript at client side, with PHP at server side.
The February edition of what’s new for web designers and developers by Webdesigner Depot includes new web apps, frameworks, jQuery plugins, icons, productivity tools, responsive design resources, and some really great new fonts. Many of the resources below are free or very low cost, and are sure to be useful to a lot of designers and developers out there.
Every programming language has its good parts and its ugly parts. CSS is no different. In this post, Louis Lazaris does nothing but vent. He has been coding websites for almost 12 years, and he's been doing CSS layouts for nearly half that. He has come to realize what is good and bad about CSS, and here are what he consider “the bad parts”.