CSS and CSS3 style tips, techniques, tricks, and snippets.
4 Sets of Free Social Media Icons – Free DownloadsHere are a variety of different packages of free social media icons in the form of CSS sprites. They are complete with free downloadable files and CSS and HTML examples. There are 4 sets. If you like these, you may also like these New Wood Social Media Icons. Slanted Social Media Icons – Twitter, Google … Read more →
Pure CSS Responsive Mobile Toggle MenuThis is a CSS-only way to convert your site’s menu into a mobile responsive menu that is wide on desktop screens, and automatically turns into a toggle-menu on small mobile screens. A toggle-menu is a menu that will be closed until you tap on the menu button. When the menu button is tapped, the menu … Read more →
Here are 2 ways you can stop Skype from adding a phone icon next to your phone numbers. Method 1: With CSS This method would be useful for a phone number that is displayed on the page, but for whatever reason, you don’t want it to be “clickable”. This means that you don’t have the … Read more →
Astrology Icons With CSSUpdated to include Chiron, Black Moon Lilith, and the asteroids: Juno, Pallas, and Vesta. This is an example of how to make astrology or zodiac icons with plain CSS. You’ll be able to use the icons as plain symbols, like in the image above. You’ll also be able to display the icons as buttons like … Read more →
Style The Response Messages For Contact Form 7This CSS will style the “Validation errors” message box and the “Thank you for your message” message for the Contact Form 7 WordPress plugin. By default, Contact Form 7 shows this error message when the contact form is not properly filled out: “One or more fields have an error. Please check and try again.” And, … Read more →
Here’s how to select every element of either the 1st column, the 2nd column, or the 3rd column of a 3-column grid layout. In other words, these are CSS selectors to select every third element. The column/grid elements must have a CSS class assigned to them. In this example, the class is “grid_4”. In addition, … Read more →
Here’s how to select every element of either the 1st column, the 2nd column, the 3rd column, or the 4th column, of a 4-column grid layout. In other words, these are CSS selectors for every fourth element. The column/grid elements must have a CSS class assigned to them. In this example, the class is “grid_3”. … Read more →
Here are the CSS and HTML needed to add a simple, site-wide notice across the top of your website. The CSS In the CSS that follows, you MUST change the last selector “.container” into the CSS class or ID of your own website’s outermost wrapper element. You can also edit the text color and background … Read more →
Some people use this responsive CSS to avoid horizontal scrolling on mobile phones: But I find that it causes the vertical scroll bar to disappear on Android phones. This was the case on an Samsung Galaxy S3. So, I don’t use overflow-x:hidden for responsive web design. Instead, I use the following. If the rest of … Read more →
Here’s how to select every element of either the 1st column, the 2nd column, the 3rd column, or the 4th column. This applies to 4-column galleries, or any setup of 4 columns (such as divs or paragraphs with class “one-fourth”).