Create a Slick CSS3 Button with box-shadow and rgba. 20th January, 2011 Tom Kenny Tutorials When redesigning my new site, I experimented with creating a realistic behaving button with CSS3.
You can see it in action on the contact page. It was created mainly with the use of different box-shadow values for the static state and the active state to mimic the real behaviour of a typical button.Press me to see the demo page First of all it’s nothing more than a simple link with a class of button. <a class="button" href="#">Button</a> Now the good stuff, the CSS that makes it happen. You probably recognise the border-radius property by now but what exactly is going on with the box-shadow property?
The Structure of box-shadow As you can see with the first shadow, we’re setting it to inset so the shadow appears inside our element. Sneak — Fixing the background 'bleed' CSS Tricks for Headings, Fonts and Text Styling. CSS Tricks for Headings, Fonts and Text Styling The truth is, we can still creating those fancy headings, cool fonts and text effects without using Photoshop, but just with CSS.
In this article, I have listed some useful CSS tricks and techniques which can be used to style your headings, fonts and text as well as content. Perhaps, these CSS tricks might inspire you on what can be done by using CSS rather than rely on Photoshop every time. Faking 'float: center' with Pseudo Elements. Window Inactive Styling. You can customize the text color and background color of text when it's selected with ::selection and ::-moz-selection.
We've covered that a number of times here in various forms and it's a cool little trick. Even the HTML5 Boilerplate has it in there by default, using super hot pink, which is the easiest way to spot a boilerplate site =). But when you change text selection styling away from its default, you lose the default styling's ability to desaturate itself when the window goes out of focus. See: I rather like how the default desaturates and becomes less visually intense. Perhaps a little known fact, but you can use a pseudo selector in conjunction with ::selection to apply styling when the window is in it's inactive state.
Using HSL for color value there, I was able to lower the saturation and increase the lightness to get a less intense version of the same hue. Remember Firefox has it's own version of ::selection, ::-moz-selection. More than just text selection Share On. Easily Turn Your Images Into Polaroids with CSS3 by ZURB. Yesterday, Jon and I were going back and forth about what to blog about next.
Love of CSS and doing something cool with it is kind of our thing and we quickly jumped on a brand new idea: polaroid style images with just CSS. Holy super awesome, Batman! With our end goal in mind (polaroid style images), we needed to set a few ground rules: Has to work on a grid of linked imagesImages must be randomly rotated like a pile of images you're sifting throughNo actual text should be used on the images (only title and alt attributes) Has to be done with just CSS (no javascript) After establishing those requirements, we got down to business.
Starting with the Images We get underway by first coding up our grid of images. Once we laid the groundwork, we moved on to getting the title attribute's content to show. Using :after to Create Content If you were to look at our demo, and then at the source code, you might be a little surprised. 7 CSS Snippets to Borrow from HTML5 Boilerplate. The "Scavenger" series looks at large-scale projects and focuses on the small snippets you can take from the project without needing the complete project.
Starting a web application from scratch can be a boring, time-consuming task. Paul Irish's HTML5 Boilerplate project is an exceptional starting point for creating a website of any kind. HTML5 Boilerplate provides an incredibly useful set of CSS, JavaScript, image, and HTML files to help you kickstart your HTML5-powered web application. Centering in the Unknown. By Chris Coyier On centering, pseudo elements, vertical-align When it comes to centering things in web design, the more information you have about the element being centered and its parent element, the easier it is.
So what if you don't know anything? It's still kinda doable. #Not too hard: Known Child If you know the height and width of both the element to be centered and its parent element (and those measurements won't change, i.e. not fluid width environment) one foolproof way to center the element is just to absolute position it with pixel values so it looks perfectly centered. Let's say you know the exact width and height of the element you are centering, but the parent element can change in height and width.