Posts Tagged ‘CSS’

We are pleased to present below all posts tagged with ‘CSS’.

Dear Clients, The Web Has Changed. It’s Time To Use CSS3 and HTML5 Now.

Since hearing about HTML5 and CSS3, then later reading Hardboiled Web design by Andy Clarke, I have been working on a presentation to help introduce these development methods to my clients. If all i said to them was “these are the latest development methods, but there will be visual differences”, I’m sure you can imagine the response I would receive.

browser differences

Most of the clients I have these days tell me they want the following: HTML to validate as strict or transitional, CSS to validate, site to be Accessibility level 2+ and last but not least, design needs to look the same across all browsers. They have learnt this information from us (developers and agencies) over the last 10 years of us educating the world on best practice. Now we need to re-educate them and it wont be easy! Most people steer away from things they don’t understand out of fear of the unknown.

Read more...

Create An HTML/CSS Mobile Web App Using Sencha Touch

The world of mobile app development is quickly becoming a crowded and complicated space, especially for those outside of the development niche. “Which development platform should I use?” “Do I go native or Web-based?” “Which devices should I plan for?” “Can I build my mobile website by hand or should I use a pre-built package?” The questions are endless.

screenshot

As a designer, my job is to help my clients answer these questions. I try to stay in the category of “knowing enough to be dangerous,” and I keep tabs on the latest mobile development trends, one being the growing popularity of mobile Web apps.

Read more...

Learning To Use The :before And :after Pseudo-Elements In CSS

If you’ve been keeping tabs on various Web design blogs, you’ve probably noticed that the :before and :after pseudo-elements have been getting quite a bit of attention in the front-end development scene — and for good reason. In particular, the experiments of one blogger — namely, London-based developer Nicolas Gallagher — have given pseudo-elements quite a bit of exposure of late.

screenshot

To complement this exposure (and take advantage of a growing trend), I’ve put together what I hope is a fairly comprehensive run-down of pseudo-elements. This article is aimed primarily at those of you who have seen some of the cool things done with pseudo-elements but want to know what this CSS technique is all about before trying it yourself.

Read more...

Behind The Scenes Of Nike Better World

Perhaps one of the most talked about websites in the last 12 months has been Nike Better World. It's been featured in countless Web design galleries, and it still stands as an example of what a great idea and some clever design and development techniques can produce.

screenshot

In this article, we’ll talk to the team behind Nike Better World to find out how the website was made. We'll look at exactly how it was put together, and then use similar techniques to create our own parallax scrolling website. Finally, we'll look at other websites that employ this technique to hopefully inspire you to build on these ideas and create your own variation.

Read more...

Five Useful Interactive CSS/jQuery Techniques Deconstructed

With the wide variety of CSS3 and JavaScript techniques available today, it's easier than ever to create unique interactive websites that delight visitors and provide a more engaging user experience. In this article, we'll walk through five interactive techniques that you can start using right now. We'll cover animated text effects, animated images without GIFs, mega drop-down menus, fancy slideshow navigation and animated icons for the hover state of buttons.

Five Useful Interactive CSS/jQuery Techniques Deconstruted

Besides learning how to accomplish these specific tasks, you'll also master a variety of useful CSS and jQuery tricks that you can leverage when creating your own interactive techniques. The solutions presented here are certainly not perfect, so any thoughts, ideas and suggestions on how you would solve these design problems would be very appreciated.

Read more...

Useful HTML-, CSS- and JavaScript Tools and Libraries

Front-end development is a tricky beast. It's not difficult to learn, but it's quite difficult to master. There are just too many things that need to be considered; too many tweaks that might be necessary here and there; too many details to make everything just right. Luckily, developers and designers out there keep releasing useful tools and resources for all of us to learn, improve our skills and just get better at what we do.

Flexible Font Sizes with jQuery

Here at Smashing Magazine, we're continuously searching for time-saving, useful HTML-, CSS- and JavaScript-resources for our readers, to make the search of these ever-growing tools easier. We hope that these tools will help you improve your skills as well as your professional workflow. A sincere thanks to all designers and developers who are featured in this round-up. We respect and appreciate your contributions to the design community.

Read more...

An Introduction To CSS3 Keyframe Animations

By now you’ve probably heard at least something about animation in CSS3 using keyframe-based syntax. The CSS3 animations module in the specification has been around for a couple of years now, and it has the potential to become a big part of Web design. Using CSS3 keyframe animations, developers can create smooth, maintainable animations that perform relatively well and that don’t require reams of scripting. It’s just another way that CSS3 is helping to solve a real-world problem in an elegant manner.

Screenshot

[fblike]

If you haven’t yet started learning the syntax for CSS3 animations, here’s your chance to prepare for when this part of the CSS3 spec moves past the working draft. In this article, we’ll cover all the important parts of the syntax, and we’ll fill you in on browser support so that you’ll know when to start using it.

Read more...

↑ Back to top