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. The x-offset tells the browser how far to move the shadow horizontally and the y-offset vertically just as you’re used to doing with background image positioning.
The :active State. 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.
The best thing about CSS styling is it can greatly affects the performance of our website in terms of page load. Text Spacing I believe most of you are known about CSS line-height property. Text Capitalization Do you know that we can capitalize our text just with CSS? CSS3 Text Shadow Obviously, CSS3 text-shadow property has the capability to create a shadow under text. Well, actually we can do even more with CSS3 text-shadow property rather than just to create a shadow under text. CSS @font-face Trick Creating New Font Style with CSS Inset Effect What Else? 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. Randomly Rotate the Images Here's the CSS to do it: Final Touches.
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. Still, HTML5 Boilerplate may be a bit more than you need if you already have a boilerplate of your own; that doesn't mean that HTML5 Boilerplate can't be useful though. Here are 7 CSS snippets you can take from HTML5 Boilterplate and incorporate in your own application. html Many developers forget about the HTML tag when it comes to styling their app, but styling the HTML tag can be one of the most important.
::selection I shared this one a long time ago, but I want to point it out again: .visuallyhidden. 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. You absolutely position the element to be centered and set the top and left values to 50% and the margin top and left values to negative half of the elements height and width. #Harder: Unknown Child The hard comes in when you don't know the dimensions of the element to be centered.