If there is one thing a language needs to qualify as a programming language, it’s variables; they’re incredibly useful, save us a bunch of work and typing, and improve coding all-round. This is exactly what CSS didn’t have. Pre-processors like Sass and Less used them, but vanilla CSS never had variables. Until now. They’ve been on the horizon for a while, but only recently have variables started to be implemented in CSS, let’s take a look at how they work. Browser support ... Currently CSS...
Math is a necessary (if not always welcome) tool in our programming languages. We use it constantly to make all kinds of dynamic decisions. Until recently, it wasn’t available in CSS without a pre-processor; however the introduction of the calc function to CSS3 provides a way of running Math calculations natively which increases performance and even enables mixed units. Browser support ... Unusually, in the case of the calc function browser support is actually pretty good: on the desktop it’s...
Over the last couple of years CSS has evolved more than we could ever imagined. Styling and layout are now entirely in our hands, although the best thing about CSS3 in my eyes are the Transforms, particularly the 3D ones. With transforms we can move elements through a 3D world, and today I’ll demonstrate this by creating a flip effect. Browser support ... The browser support for 3D transforms is a little lacking, but on the whole not too bad. It’s supported by all webkit browsers using the webkit prefix,...
We all make mistakes when creating our code, it’s part of being a programmer and having a linter that pulls us up when we make errors is always a great idea. We already have a famous one for JavaScript, JSLint, and now Twitter has given us one for CSS. It’s called Recess and it can help us keep our CSS code clean and super manageable. Installation ... In order to install this linter you’ll first need to have node and npm installed on your computer. If you have that installed then installing recess is as...
CSS Filters are a powerful tool that allow us to achieve some amazing visual effects with our elements; they are especially great for hover effects. Filters provide us with a method for modifying the rendering of a basic DOM element. They allow you to do things like blur, modify contrast, even the color of your element. Creating filters ... When I think about image filters, the first thing that comes to mind is the black and white filter; taking a full-color image and turning that image into a monochrome...
If your website has a lot of text, at some point or another people will more than likely want to select it to copy, or search on Google. Changing the text selection color is always a nice touch, it shows that you're paying attention to the finer details of the site. Today I'm going to share a quick tip that will allow you to achieve some different looks for your selected text. Browser support ... The browser support for this selector is pretty good nowadays, it's supported by all the latest versions of the most...
When we create textareas, we don't exercise a lot of control over how they resize. By default they can be resized vertically or horizontally and they also use the default resizing button. However, we actually have far more control than we think we do: we can define how the textarea should resize and we even have a pseudo element that allows us to control the icon. Controlling the resizing ... Depending on our designs, we frequently don't want our textareas to resize both vertically and horizontally because...
Today's web is built of rectangles, we can try and cheat it by creating other shapes in the browser, but the basic foundation is rectangles. That poses a problem for anyone trying to produce a more organic layout with, for example, text wrapping around a curve; or even limited within a circle. The solution to this is CSS shapes and exclusions, which allow us to create true polygons, circles and ellipses. For now this feature is only available in Chrome Canary, or by enabling experimental WebKit features;...