Keep posted
Advertising
This month’s Collaborators
Friends
Css
CSS menu, 180 scripts, plugins and freebies
Here on webdesignshock.com we’re always on the lookout for the latest and everything fresh in web designs plug-ins, tools, etc. for all our web knowledge enthusiastic readers, although sometimes it’s not necessarily time to highlight the new but to acknowledge an on growing plug in use trend that solidify its acceptance amongst users, thanks to its outstanding features. Read more
Responsive Web Design, most complete guide
If you’ve been working in the web design field for the past couple of years you should know that designing a fixed interface for a widescreen computer is not enough. Most of the clients you’ll be dealing with from now are going to request that their site is not only desktop-compliant but is also optimized for smartphones and tablets. This issue presents the necessity of working with different screen resolutions in order to guarantee that a website looks good in all sorts of devices.
But if the devices’ production continues at the same speed that it has for the past couple of years, the amount of screen resolutions and formats that designers will have to deal with is going to become unbearable. On this article we’ll be discussing one of the most effective solutions to face this problem with a certain easiness, we’re of course talking about responsive web design.
Read more
Amazing jQuery photo slider
What’s up guys?, to continue with our experiment series, our designing and programming team joined forces to create an amazing carousel vintage photo slider with PHP and jQuery. This is definitely a nice photo slider to be applied in different websites so you can showcase your work in a more original way. This tutorial is going to cover the programming part of the carousel (stay close to find out the release time of the design part) so you can learn how we did this fancy photo slider and you can adapt it to your own projects. You can also take a look at the demo to see how it works and download all the source files.
CSS3 For Web Designers review
A review by Nathan Davies
This book got me into trouble with the family – it is one of those books that I looked for any spare five minutes to read. Not all books fit into this category. In itself this is testament to how well written the book is and how engaging its content is. So, what is it that makes this short book so useful? It’s short.
Web design software: 250 fresh and useful tools
A part of every web designer’s functions is to find new methods for improving the way things are made, this includes finding ways of reducing file sizes, cleaning messy code, optimizing images and testing the site’s performance
As web designers, we’re always looking for new tools and gadgets to make our lives easier and be able to work faster and more effectively. These tools can be helpful in many different ways, including image editors, code formatters, SEO analyzers and more; we have gathered more than 250 web design tools that will help you save time and concentrate in the most relevant aspects in web design instead of figuring out how to optimize a CSS, boost your site’s traffic or reduce a JPEG size.
CSS and CSS3 buttons, 110 best sets !
Tired of turning upside down the internet and not finding what you’re looking for? Well, here we’re providing you the best of our CSS buttons search. Here you’ll find over 100 buttons, among pure CSS and image + CSS made. All of them great looking, with neat effects and really easy to include them in your code.
Images to CSS
Hi folks, today we stumbled upon a really helpful tool for converting images to CSS, which is something that we haven’t found before. PNG images work best with this tool, but it can also convert JPEG, GIF, BMP, TIFF and ICO formats. All you have to do is choose a file or enter image URL and click the ‘Convert to CSS’ button. Piece of cake. Read more
CSS3 drop shadow, 100+ best tutorials, scripts and examples
Until a while ago, web developers were forced to learn Photoshop or count with a trustful graphic designer to help them with things like shadows, gradients and stuff, this because there was no method to create these elements directly on CSS. Then the world saw the release of CSS3 with its fantastic features, which included of course making shadows.
On this post we have gathered a big list with some of the best resources to let you know a little bit more about CSS3 shadows, you will find useful tutorials, great plugins and code examples, shadow generators and a few extra links.
CSS3 box shadows, tips and examples
One of the nicest properties that you can implement in modern browsers is definitely box-shadow. Using six basic values, you can create awesome things; on this quick review the author plays a little bit with each property and shows 30 different experiments that prove the great things that you can achieve with box-shadow, though the result can only be visualized in Chrome 11 +.
150+ CSS3 tutorials and examples
There’s no doubt that 2011 can easily become the year of CSS3. In only the first months we have seen the appearance of IE9 and the highly anticipated Firefox 4, both of these browsers offer lots of possibilities that they did not provide in the past, being one of them CSS3 support of course.
On this countdown we have gathered an extended list of CSS3 tutorials that vary from really simple articles where you can master all its main properties and then more advanced tutorials filled with magic that creates astonishing graphics, animations and interactive elements that were impossible to do a couple of years earlier. We have included all sort of tutorials, some of them will guide you through the main CSS3 properties, others will teach you how to make things that only graphic programs were capable of previously; finally, we will be presenting an special segment of tutorials that will show you how to take this language towards epic proportions.
CSS3 Prefix tool
Every day we’re seeing new releases that are meant to facilitate our adaptation to the new CSS3 era, some of them include compatibility charts, documentations and prefix tools. Today we like to recommend you a nice CSS3 tool that will help you enhance your CSS3 code quickly and without having to download anything.
Prefix My CSS is a clean and effective tool that helps you prefix your CSS3 code, just paste it inside the box, adjust the main options and voilà. Although the tool is currently in alpha version it’s already providing great help to web developers.
Multiple columns CSS framework (up to 6)
If we think about CSS frameworks the amount of these resources on the web is huge, some with better performance, others providing a prettier appearance and some are simply more flexible. Usually web developers modify default CSS frameworks to make them fit their needs, making the process way more complicated than it should be, ending in duplicated classes and a lot of trash code.
Not Just a Grid is an amazing CSS framework developed by Al Redpath that provides a flexible and quicker alternative for web designers and developers. It has been enhanced with CSS3 to support different upgrades and user experiences.
Read more
CSS Easing animation tool
For those who have a little experience in Flash it’s probably that they remember MC Tween, an extension that permitted Flash to work with awesome easing animations that saved tons of time and programming lines. The extension was something really great and probed the power of Flash during those days.
But now the real deal is CSS and HTML, the two fantastic languages that are surprising us every day with all the great things that are capable to conceive, including animations. With the upcoming standardization of web browsers it is now possible to work with all the great CSS properties without fearing that they won’t be properly shown in some search engines. There’s a CSS equivalent to Mc Tween called Ceaser that we want to present to you in this moment.
Read more
Create CSS classes and IDs from a single sprite image
As you probably know, sprites are 2D images or animations that are integrated into a larger scene to work as description elements and perform some other functions. Sprites are often utilized to generate classes and ID’s in CSS but making these usually requires more than one sprite image.
Spritebox is an useful tool developed by Gilbert Sinnott that allows you to make CSS classes and ID’s from an unique sprite image, making things much easier for web designers and developers.
Read more
Gradient property in CSS3
Since the moment that digital design took over all of us, gradients have been a recurrent element in the field, witnessing huge popularity periods followed by anti-gradients seasons, but at the end, we all know that a good gradient always looks great when used properly.
Until this point the best way of working with gradients in web design was utilizing repeated images that generate the gradient effect after developing the main picture in a graphic software such as Photoshop or Fireworks, the problem was that if you needed to change any detail of the gradient you were forced to go back to the graphic program and repeat the process all over again.
Read more