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.
Making your font-size respond to viewport or container size should be a must to complete your responsive designs. Having a fixed font-size accross devices is not always a good idea. The key point is to get a readable font size and a comfortable line length in most viewports. CSS viewport units and media queries provide the means to implement a responsive font size.
Adding Related Posts to WordPress is a great way of keeping your users reading your site for a little longer. There are two ways to add a WordPress Related Posts section: installing a plugin or doing it yourself. I would use plugins for a lot of things but adding related posts is so easy that using a plugin feels like overkill. If you know how to tweak WordPress, doing it yourself will give you more control over the displayed posts and layout.
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.
The K2 Joomla extension was built as a complete replacement for Joomla's default article system. K2 adds important features that Joomla misses like comments, image auto-resizing and author profile pages. It gives Joomla a level-up as a blogging platform, adding the features that make WordPress great. Joomla has the plus of having tons of settings which allow to personalize the exact behaviour of pretty much everything.
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.
Responsive websites using CSS3 media queries are getting more popular every day. The convenience of a single design that adapts to virtually any device makes responsive design a very practical approach. In responsive design, images are usually scaled by using percentage widths in CSS. However, AdSense ads won't work the same way.
Probably a second impulse when implementing responsive ads is using display:none to hide wide ads in small viewports. However, using display:none on AdSense ads is explicitly prohibited by Google in their Ad Implementation Policies. There are just three alternatives for responsive websites: