Creating Interactive Fictional UI With CSS3 In today’s article we will create an interactive fiction user interface (UI) coded with CSS transforms and transition properties. The idea is to have a button and reveal more information when mouse over on it. You can check out the demo before you proceed to the next section. View Demo Cool right? HTML Structure We will have a simple HTML structure with several division where each one contains title and description. As you can see above, each menu object “menu_obj” division contains extra classes such as “home”, “profile” and “contact” that gives us freedom to define background image with CSS later. Home Button Profile Button Contact Button Hover State Ok. CSS Style Let’s define the style for each buttons and its child. First of all, we have given the width, height for each “menu_obj”; apply inner and outer drop shadows; and define the transition type and its duration. The title element has scale up 5 times, and 0 opacity. The content division will fade in and scale up to 1. That’s it! Conclusion
MicroTut: Centering a Div Both Horizontally And Vertically Martin Angelov While building web page layouts, you’ve probably been faced with a situation where you need to center a div both horizontally and vertically with pure CSS. There are more than a few ways to achieve this, and in this MicroTut I am going to show you my favorite involving CSS and jQuery. But first, the basics: Horizontal centering with CSS It is as easy as applying a margin to a div: To center a div only horizontally, you need to specify a width, and an auto value for the left and right margins (you do remember the shorthand declarations in CSS don’t you?). Horizontal and vertical centering with CSS Center a div both horizontally and vertically with CSS is a bit more tricky. By positioning the element absolutely, we can detach it from its surroundings and specify its position in relation to the browser window. Horizontal and vertical centering with jQuery As mentioned earlier – the CSS method only works with divs with fixed dimensions. by Martin Angelov Articles
Advanced CSS Menu Last tutorial, I showed you how to design a watercolor effect menu in Photoshop. This tutorial I will show you how to slice up the menu design (step by step) and put them together with CSS. Most of you probably know how to code a horizontal or vertical CSS list menu. Now let's take it to the next level — code an advanced (un-typical) list menu utilizing the CSS position property. View Demo CSS menu Download Demo ZIP Overview Here are the required graphics to assembe the menu (you can download from the zip). 1. Open the Photoshop file. 2. Turn off the background Layer Group and leave only the menu text layers visible. Create a new file and take note of the file dimension (w x h), in my case the "home" graphic is 144 x 58px. Here is how the hover effect will work. Repeat this step for the other buttons. 3. When you are done with the graphics, let's start coding. #menu Reset the menu to no padding, no margin, and no list-style. #menu span #menu a The key point here is the text-indent property.
10 Random CSS Tricks You Might Want to Know About CSS is the fundamental way of styling our web pages. Its deceptively easy syntax allows us to do many things to affect the visual layer of our work. And especially with CSS3, the language has gotten even more powerful. There are many useful CSS techniques and tricks out there for you to take advantage of. 1. If you would like to use relative units (em) for your font sizes, declaring 62.5% for the font-size property of the body will make it easier to convert px to em. 2. When you focus (:focus) on an input element, perhaps you have noticed that Safari adds a blue border around it (and Chrome, a yellow one). If you would like to remove this border outline, you can use the following style rule (this removes the outline from text fields): Please note that outline is used for accessibility purposes so that it is easier to see what input field is active. 3. For progressive enhancement, you could use the transform property that is supported by many browsers that have CSS3 support. 4. 5. 6. 7. 8.
CSS3 Image Styles When applying CSS3 inset box-shadow or border-radius directly to the image element, the browser doesn't render the CSS style perfectly. However, if the image is applied as background-image, you can add any style to it and have it rendered properly. Darcy Clarke and I put a quick tutorial together on how to use jQuery to make perfect rounded corner images dynamically. Today I'm going to revisit the topic and show you how much more you can do with the background-image CSS trick. I will show you how to use box-shadow, border-radius and transition to create various image styles. View Demo Image Styles Problem (see demo) Take a look at the demo and note that there is border-radius and inset box-shadow applied in the first row of images. Workaround To get the border-radius and inset box-shadow working, the workaround is to apply the actual image as background-image. Dynamic Way To make it dynamic, you can use to jQuery to wrap the background image dynamically for every image element. Output
Multiple Backgrounds and CSS Gradients CSS3 features are making their way into the various browsers and while many are holding off on implementing them, there are those who are venturing ahead and likely running into a world of interesting quirks across the various platforms. Two such features that I have been having the pleasure of enjoying are the use of multiple backgrounds and CSS gradients. I'm covering both features because multiple backgrounds by itself is simple enough, as are CSS gradients, but combining the two is where things get interesting. Multiple Backgrounds What are multiple backgrounds when it comes to CSS? background-image: url(…), url(…); For browsers that don't recognize multiple backgrounds, the entire background declaration will be ignored. background: url(…) 0 0 repeat 10px 100px, url(…) 5px 5px no-repeat 5px 5px #FFF; background-image: url(…), url(…); You can declare multiple backgrounds using the shorthand syntax, as well. background: url(…) 0 0 repeat, url(…) 5px 5px no-repeat #FFF; Background Size
CSS: Elastic Videos While I was coding the Elemin Theme (a responsive WordPress theme that I recently designed), one of the challenges that I faced was to make the embedded videos elastic. Using the max-width:100% and height:auto trick works with native HTML5 video tag, but it doesn't work with embed code using iframe or object tag. After hours of experimenting and Googling, I finally found a trick on how to achieve this. If you are creating a responsive design, this simple CSS trick will come in handy. View the final demo and resize your browser window to see it in action. View Demo Elastic Videos Elastic HTML5 Videos (demo) With HTML5 video element, you can easily make it elastic by using the max-width:100% trick (see elastic HTML5 video demo). Elastic Object & Iframe Embedded Videos (demo) The trick is very simple. How to Create Fixed Width & Elastic To restrict the width of the video, an additional <div> wrapper is required. Compatibility Credits This trick was found on tjkdesign.com.