Group items tagged

Today's front-end developers don't just need to understand how to write CSS, we need to know how to write it efficiently. And what "efficiently" means can depend on your project and environment. Perhaps you have a team with several members working in the CSS and you need an efficient way to work together. Or maybe you have a huge enterprise site and you need your CSS optimized for speed. You could even be working with a legacy system that restricts access to HTML, which means you need efficient selectors to effectively style elements without ids or classes. You might even face all these situations and more.

CSS is a really simple and straightforward language, but when it is getting too long - let's say for a thousand of lines, it turns into a maintenance 'nightmare'. Everything will be too complicated to maintain, and we will get lost with which style rules to keep up with or overwrite. For that reason, a CSS Pre-processor is created to make writing CSS programmable and more maintainable............

Today I will teach you how to create a simple contact form in HTML5 and CSS3 that you can download for free. Many WordPress plugins come with fully functional contact forms that can be installed and used right away, but we believe in beautiful design and in your right to style it however you choose.

Transitions (basic animations) are one of the most popular additions in CSS3, and one of the easiest to implement for big gains on your site. A transition is simply an animation from one set of CSS properties to another. So for example; whilst before you may have had links with blue text, which suddenly turned orange when you hovered on them, you would now replace that sudden jump with a more graceful animation.

Whoah, been a while since I've posted something! Yet, I wanted to mess around with some fun CSS3 stuff and wanted to share the results with you. Today, we're going to create CSS animated profile cards. Although there are four different kind or animations ( Push, Slide, 3D Flip and Explode), they all share the same kind of HTML structure.

With so many new trends advancing every year it can be difficult keeping up with the industry. Website designers and frontend developers have been deeply ingrained into the newer CSS3 properties, determining the ultimate browser support and quirky hacks. But there are also brilliant CSS2 code snippets which have been ...

The pseudo-classes are used to target elements without having to add extra classes, attributes or ID; that is why it is called in that way, pseudo-class. Throughout our previous posts, we have covered a few new CSS3 pseudo-classes, including :not, :before and :after, :first-of-type and we also use pseudo-classes in ...

Photoshop isn't only the popular choice for photo editing, it's also a good choice for designing a website. We have previously shown you how to design a blog layout with Photoshop. With a range of effects and features, Photoshop allowed us to compose a visually rich presentation using drop shadows, ...

I want to share a fantastic little tool that I've only recently come across; Live.js, written by Martin Kool. This JavaScript file automatically checks for changes to your CSS and JavaScript files, and refreshes them. That means you can have your text editor in one half of the screen, and a web browser in the other. When you save changes in the editor, the updates are reflected immediately in your browser. It really helps to speed up your development time. A lot of text editors offer HTML previews and such, but they only work for plain .html pages. The great thing about Live.js is that it works on any webpage, including a working WordPress theme...............(.read more.)

CSS background animation has been a hot topic for a long time, mostly because they look pretty sweet and don't require additional elements. I was recently asked if it was possible to have multiple background animations on a given element and the answer is yes...with concessions. Let's take a look at how it's done!

Last week I was working on a new project and needed some buttons that I would prefer to create using CSS3. I decided to look around and see what was available and ready to be used on a project and at same time I decided to create a post listing the ones I liked the most so you can also benefit from this quest.

Here are 8 vital CSS tools to speed up your designing process and coding.

Using LESS to Create Twenty Twelve Child Theme We are going to be creating a child theme for the default Twenty Twelve theme. For those of you who are unfamiliar with creating child themes, the only thing we need to create a child theme is a style.css file. For more info, visit the WordPress Codex...............

Since CSS shapes are becoming more important to website development, I thought that a simple list of how to create the most common shapes was in order. You'll find that most of these shapes are very simple to achieve and that they are not that complicated at all. However, at the same time they will save you a lot of trouble.

Fries by Jaune Sarmiento just reached version number 1.0. The project offers a framework for the development of web apps in the look and feel of native Android apps. If you are familiar with Android's UI from version 4 on, you will definitely know your ways around, once you get a hold of Fries. In its current iteration, Fries is optimized to cooperate with PhoneGap, thus letting you build native Android experiences.

In the first part of this series I gave a quick overview of the popular CSS preprocessors LESS and SASS. I also shared a few of the frameworks in which they are used. I plan on taking a deeper dive into LESS and talking about the parts of the language I use most often. I also plan on showing you how to get started using it with CodeKit. Let's dig in!

WHAT ARE CSS TRANSITIONS? Well, transitions smooth out value change by allowing elements to gently change from one style to the next; it's adding an effect to the change. Take for instance a link, where you set its style to have a pink background on hover. What typically happens is that, on mouse over, the colour rapidly changes to pink and rapidly changes back on mouse out. With a transition, the processes can be smoothed out so that the colour change faces in and out.

The quality of users' experience with your website is the deciding factor of its success. If visitors are able to use your site quickly and without problems, they are likely to return. On the other hand, if your site is confusing and frustrating to use, they'll be happy to find a better one.

If you are in search of wallpapers brimming with splashes of colors to liven up your desktop background screen then this post will offer you something that attracts your eyes. Today, we have collected some wallpapers consisting of different visible colors from red to violet which can really cheer you up and make you feel good - the spectrum wallpapers.

More and more people are using mobile devices to process digital documents since they always seem to have their smartphone and tablet on them all the time. However, having many different file formats means requiring a lot of different apps to open these documents. If we can bank on just ...