Tag Archives : css3

The social news community Digg has been online since 2004 and rapidly grew in popularity leading up to the 2008 elections. Come 2011 the Digg team performed an overhaul on the system and completely revamped the site layout. This also broke the friends system, allowing big-name publishers to game the front page. This upset many powerhouse users who were furious with the major changes. Over time the site has slowly moved back towards its roots as a user-powered news community. And although the domain has lost some credibility, their design skills are still impeccable. So in this tutorial I want to explain how we can build a similar layout using static HTML5 and CSS3 properties. I won’t have time to cover every detail but you can download my attached source code and play around on your own. Read the rest of the article on : Speckyboy Design Magazine

It has been well over a year since we last took a look at some of the latest CSS3 buttons techniques. And what a difference a year makes. No longer satisfied with just using the basic CSS3 properties (border-radius, box-shadow…), many developers have progressed to using @font-face icons, animation and 3D effects. All with only CSS. Hope you enjoy this selection: You might also like… 20 CSS3 Tutorials and Techniques for Creating Buttons → 22 CSS Button Styling Tutorials and Techniques → 20 Awesome jQuery Enhanced CSS Button Techniques → CSS3 Menu and Navigation Tutorials → Or, you could browse our extensive CSS Archives. Read the rest of the article on : Speckyboy Design Magazine

HTML5 and CSS3 are great languages to start off learning with, and I’ve always thought that one of the best ways to start learning is to just dive in and manipulate the code. As you could probably tell, this is where generators step in. They are a great way to generate some code, play with it, and learn. Not only that, they are incredibly useful because often times as a developer or designer we find we are doing things over and over again. Well, generators can take off that edge and do those small things for you each time. As an example, I have a text-expander snippet that creates an HTML5 template that I wrote about here. Now, text-expander is great but it doesn’t solve every need, and in this case there is a big need for generators so I took the time to find 20 of my favorite and describe why … Read the rest of the article on : Webdesigner Depot

Advertise here with BSA CSS3's properties enable us to create many different shapes by styling a single element. CSS3 Shapes is a project that shares the styles for many different shapes including triangle, diamond, star, comment bubble, egg, heart and more. For sure, not all of them are functional for daily use but they are definitely good for inspiration [...] Read the rest of the article on : WebResourcesDepot

All of the CSS3 navigation tutorials we have for you today are all fully functional and could easily be used on a live site. But we do prefer to think of them all as being more experimental and proof-of-concept rather than being a robust end-product (a sprinkle of jQuery always makes everything better!). What they do offer is an opportunity to roll-up your sleeves and delve into some ground-breaking code. Anyway, here they all are: You might also like… CSS3 Compatibility Tools, Resources and References for Internet Explorer → 25 Free Fonts Perfect for @fontface → & @fontface Icons → Liquid, Fluid and Elastic Layout Templates, Tools and Frameworks → Pure CSS Alternatives to Javascript → 40 Essential CSS Templates, Resources and Downloads → Read the rest of the article on : Speckyboy Design Magazine

Advertise here with BSA Hakim El Hattab (hakim.se), a very talented developer and programmer, has created a set of very nice scrolling effects. The effects are all CSS-only and a simple JavaScript function helps attaching/removing classes to elements. Currently, there are 10+ effects and, as expected, they are WebKit + Firefox-only but degrade nicely on incompatible browsers. P.S. You [...] Read the rest of the article on : WebResourcesDepot

Advertise here with BSA Ian Hansson, a designer/developer from London, has created a fully-functional responsive slider with CSS3 without any JavaScript. It is similar to JavaScript sliders; works by floating all of the content areas (articles) next to each other and hides the overflow. After that, animating the margin of the inner <div> gives us the next item. There [...] Read the rest of the article on : WebResourcesDepot

We all know it and we all love it, and of course by now you probably already know I am talking about CSS and CSS3. Actually, we should probably take a moment to thank CSS3 before going any further for speeding up the load times for all of your favorite sites.  They, if they know what they are doing, are more than likely using CSS3 in place of a ton of images to enhance user load times, which is pretty awesome. It is a pretty accepted fact by now that we simply do not need images to do all the things we used to need them for.  With CSS3 gradients, transitions, and all the effects, it has really seemed to have taken a lot of the weight off the shoulders of our websites, because let’s be honest—images were surely weighing them down. Don’t be mistaken though, CSS3 and CSS can’t do everyt … Read the rest of the article on : Webdesigner Depot

Advertise here with BSA As almost every browser has their own CSS prefixes (-webkit-, -moz- or -o-) for some properties, we usually need to add all of them to our stylesheets. This is not only time-consuming, but also hard to maintain, increases the sizes of CSS files (that can end up in slower loading times and higher bandwidth usage). [...] Read the rest of the article on : WebResourcesDepot

Web developers can save a lot of time using more sophisticated CSS3 syntax. Users who visit your page are expecting the fastest possible load time – which makes it your responsibility to keep file sizes down. There are plenty of shorthand tricks with CSS and especially under the new CSS3 model. I have put together a few of these ideas in the guide below. We should also touch upon other areas such as minifying your CSS code. There are in-browser tools available to aid developers in the styling process but you would want to combine shortcodes with this file-size reduc … Read the rest of the article on : hongkiat.com