How CSS3 Makes the Web Beautiful
This is a writing sample from Scripted writer samuel aboagye
CSS3 provides a toolset to make gorgeous, responsive websites. Here's how to get started. CSS3, the most recent markup language for HTML is used to style web pages can create an incredible variety of effects. Web developers are using the newly-updated tool to more creatively build fluid and engaging presentations. Let's take a look at some great CSS3 techniques that help make websites a joy to browse.
Using CSS3 to Create Shadows
Did you know that a single HTML element can have up to 999 shadows? Let's explore how to add just a few box shadows. In your normal CSS3 markup for an element, include the command: - webkit-border-radius: 30px; Use 30px to begin with and adjust this value if necessary. Then, use the following commands to select individual pixels of your element's shadow and give them a certain color: -webkit-box-shadow: 1px -1px #b2492c, 2px -2px #b3442d, 5px -5px #a43136; And that's it. Add as many pixels as you need to build out your shadow. To increase browser functionality, you can duplicate your shadow code and use the -moz-box-shadow command instead.
Using CSS3 Media Queries for Responsive Design
You can use CSS3 to easily build websites that will react to the screen size. Media queries — which start with @media — are activated when certain conditions are met. In this example, the condition will be a certain screen size. First, you'll need to learn about the screen sizes for commonly used devices. Let's use 480px here, which is about the size of a mobile phone in landscape mode. In our example, we have a container that contains an ordinary paragraph in the main section — which is floated to the left — as well as a sidebar which is floated to the right. This is how you set the container to react fluidly to a changing screen size: @media (max-width:480px) { .container { width:100% } .main-section, .sidebar { width:auto; margin-bottom:20px; float:none; } } This code will activate when the screen size is 480px at the most. It sets the main section and sidebar widths to auto, creates a margin underneath them and removes the "float" property. This causes the sidebar to appear over the main section, much like a navigation bar. This makes for much easier browsing on small screens so the user doesn't have to try to scroll back and forth to see the whole page. These are just two ways that CSS3 is making the web more enjoyable every day. As HTML and CSS3 continue to evolve, new features and abilities will develop to add even more beauty and functionality to the web.Image Credit: Nelson Felix Giga via Flickr.
Written by:
