Learn the latest tips, techniques, and approaches for laying out your websites with CSS and stylesheets.
This is the third article in our back to basics series where we’re taking a look at the absolute beginning concepts of web development. If you’re a designer with little to no knowledge of web programming, this series is for you.
In our first article, we went over what HTML is and in our second article we outlined the basic anatomy of an HTML document. Today we’ll jump to a new topic and answer a very important question: What is CSS?
Here at Design Shack we like to feature a full range of tutorials, from expert PHP projects to very simple CSS tips. Today’s tutorial is targeted at those still in the beginner stages of CSS.
One of the most frequent questions I get from CSS beginners is, “How do I create a button?” It’s a simple question with a complicated answer. There are quite a few ways to go about it and unfortunately there are also quite a few ways to go wrong. When I first started out in CSS, figuring out all the button syntax was one of the most persistent troubles I faced, it seemed like I was always doing it wrong. Today we’re going to walk through a very simple and flexible process that you can apply to any button you create. More important than the end result is the in-depth explanation at each point outlining why we do it that way.
Today we’re going to have some good clean fun by recreating the animated Mario Bros. question mark box with pure CSS3.
Along the way you’ll learn how to use several cool CSS3 technologies such as rounded corners, box and text shadows, and keyframe animations that work in both Safari and Firefox. Let’s jump in!
Should web designers understand basic HTML and CSS? It’s a tired argument with two sides that refuse to yield, why even discuss it?
The purpose of this article is not to prove which group is right but to attempt to show that both sides do indeed make valid points and to see if analyzing these points brings us to a compromise that both parties can agree on.
Today we’re going to discuss a little bit about how and why Flash came to be regarded in a negative light and how we can avoid running down the same path with the modern technologies replacing it.
Apple is a very popular brand in the new technological age in which we live. Both designers and developers agree that Apple’s products display exquisite talent and passion for their skills. Over time user interface design has taken a turn upwards and is now one of the hottest topics amongst web designers.
Below I’ll be going over how to build a small Apple-styled input form with some basic structure and scripting. All code included is based off XHTML Transitional Doctype along with newer CSS2/CSS3 techniques. We’ll also be using the jQuery 1.4.1 library to support our display label functions.
Multi-step CSS animations are easy with keyframes, but what if we want to use plain old transitions to achieve a similar effect? Further, how do we take a single hover event and translate that into multiple animations on different elements?
The answer lies in using buried hovers, a simple and effective trick you should definitely try out.
Using an image-based font can be a fun and quick way to implement icons across your site. It’s a super easy process that gives you complete freedom to go back and re-size your icons at any time.
Today we’ll use the excellent Pictos font to build a simple web page so you can get a feel for the process.
Today’s article encourages you to get into the habit of devoting time to little experiments. Testing ideas and solving problems in a low-pressure and possibly even fun environment can massively boost your education and lead to awesome innovation.
We’ll start with some benefits and tips for experimenting with web development projects and finish up with a brief look at a few of the tools that I personally use to compose my own experiments. Let’s get started!
Do you hate CSS grid frameworks but love the rapid layout benefits that they provide? Do you struggle with the math and code necessary to create your own flexible multi-column layouts on the fly?
Today we’re going to walk you through creating your own basic, reusable system for creating multiple columns that you can implement anywhere any time with only a few lines of code. No bloated code or non-sematic class names required!
Yesterday we discussed the future of CSS layout and a few of the new modules that CSS3 brings to the table in this arena. One of these that we briefly touched on was CSS3 Flexbox.
Today we’re going to dig deeper into this model and build a full-on web page with it. It will by no means be ready to implement on your projects but it will give you further insight into one possible way that we will be coding websites in years to come. Plus, this stuff is just flat out fun to play with!
Floats are one of the most basic tools for structuring a web page using CSS. They’re both one of the very first things that we learn about and one of the last things that we truly master.
Today’s article looks at some of the reasons that floats are pretty lame and takes a look at a number of alternative layout systems, some of which are still under development but may one day represent the standard for CSS-based layout.