Contrasting the text with the background color is a extremely simple task. Downloading a full-blown plugin is overkill in most cases. A simple function can take care of it by chosing between black and white color based on the background. Of course it won't detect background image colors, but setting a similar fallback color along with the image should do it. Continue reading →
How widespread are today's responsive designs among the world's most visited websites? What are the most common site widths and font sizes? In codeitdown, we conducted a small case study that pretends to answer these and some other important design questions.
Creating animations using sprites is now easier than ever thanks to the CSS3 animation property. Animating on hover is a great way to impress your users and maybe get some more clicks where you want them. The trick consists in creating a horizontal sprite and animating the background-position property.
Editing and testing changes to a WordPress theme is certainly frustrating when using the default online editor. This is specially true when editing the active theme. WordPress doesn't offer any option to test drive your changes before they go live. Being used to edit CSS files offline, the first thing that came into my mind was to replicate the WordPress site offline and then upload the files via FTP. However, I ended up doing my editing and testing online for several big reasons.
Styling ordered list numbers with CSS is not as simple as one might think because there is no CSS selector to target list numbers. Styling them is only possible with a simple CSS3 technique that uses a counter to replace the default numbers.
Styled numbers will only be visible in CSS3 browsers , but fallback is provided so that default unstyled numbers are displayed in old browsers.
Creating simple fixed-size CSS shapes like circles, triangles, and squares is very straightforward. New properties, like border-radius and transform allow creation of a whole array of CSS-only shapes that previously required images. Even though responsiveness adds a level of complexity, all basic shapes require only one div, making them more convenient than SVG vector shapes.
CSS vendor prefixes like -webkit, -ms, -moz and -o are constantly being dropped as people updates their browsers and as browsers adopt the standard unprefixed properties. A post about today's recommended prefixes would probably be outdated in a few months. I'll just add caniuse.com frames showing updated compatibility tables for the most important CSS properties that still may need prefixes to make it easier for you to decide by yourself.
Properties not listed here, like box-shadow and text-shadow do not need prefixing. This doesn't mean they are fully supported. Internet Explorer 9 and below, for example, don't support text-shadow, prefixed or not. Border-radius is not supported by IE8 and below.
There is no such thing as a universal solution for ad placement. You won't find it here and you'll never find it. I rather write this article to give you, ad Publisher, some general guidelines on what to try and how to try it. After reading several blog articles on Adsense Ad Placement and how they doubled or tripled their income overnight and trying every Ad placement they suggested, I still had a terribly low CTR and income for the number of visits I was having. I suppose you know exactly how I felt.
The solution for my extremely low CTR was not using a particular ad unit nor placing ads above the fold, one of the first recommendations you'll find on the web. The key for me was to start using my head.
CSS square and rectangular containers with a fixed aspect ratio are very easy to implement when they are also fixed-size. It's just a matter of specifying width and height in pixels. When adding responsiveness, keeping an aspect ratio is not straighforward. For responsive shapes, using paddings is the way to go.
In this article I share the code used to create fixed-size and responsive CSS squares and rectangles with vertically centered content, which is a common use for them. An SVG image with a width percentage width and height:auto is an alternative to CSS squares. However, SVG adds the overhead of loading an extra file and won't hold content.
CSS3, with its great border-radius property, allows creation of fixed-size and responsive CSS round buttons. This article explains how to create circular buttons using CSS3 only. Add animation, shadows and/or images to the buttons to get to get the perfect look and feel. The round buttons, both fixed-size and responsive work in all modern browsers and will render square in CSS2- browsers.
Why CSS round buttons?
Now, why round buttons? Round buttons have a ton of applications. Round home and help buttons, as well as video or music player buttons are very common in web sites and applications. Using responsive buttons means that they will automatically resize without distortion nor need for extra CSS rules. A simple SVG image may be used as an icon for best results. SVG vector shapes resize without loss of detail, making them great for responsive design.
Round buttons may also hold text. "GO" buttons, which, for example, start a tutorial or product tour are the most common example. Round OK buttons are also quite popular. In general, they are used to hold a single short line of text.