HTML element posts

CSS

W3C ‘Media Queries’ Proposal Boosts Responsive Web Design

Responsive Web Design took a big step forward on June 19, when a highly influential W3C Working Group published a draft recommendation stating that an additional slate of media queries should be incorporated into web browsers. The CSS Working Group's proposal would enable browsers to render web design layouts in a much more flexible manner, based on factors such as screen size, color depth, and device orientation. Media queries consist of a media type (ex. screen or print), combined with defining...
CSS

Using CSS3 Attribute Selectors

Since CSS2 developers have been able to use HTML element attribute values to identify Web page items for styling properties. With CSS3, this is extended significantly with the addition of substring matching within attribute selection. This allows you to define styling rules in a more dynamic and efficient way than before, by identifying elements with one or more chained substrings defined in your CSS code. In this tutorial we will outline how to use these new substring matching attribute selectors....

Adding Responsive Videos to your Design

Responsive designs are all the hype in Web development communities nowadays. With videos becoming an important marketing tool on many websites, there is a growing need to incorporate responsive videos into these designs. Responsive videos are elastic and are especially favored where web pages will be viewed on different screen sizes using a variety of browsers. Using the HTML5 video element however is not enough when handling video embed code that uses iframes and objects tags. Using the HTML5...

Common PHP File Upload Restrictions

From family photos to business documents, file uploads power many of the major web applications. A typical HTML form that allows the user to upload a file may look like this: <html> <body> <form action="upload_file.php" method="post" enctype="multipart/form-data"> File Name: <input type="file" name="file" id="file" />  <br /> <input type="submit" name="submit" value="Submit" /> </form> </body> </html> In this case, the...
CSS

Using Firebug to Improve your Web Design Skills

Have you ever come across a beautifully designed website and wished you had X-ray vision to see how all those HTML elements on the site work? Have you ever wanted to see how a certain design might look on your site without actually changing the underlying code? Well, you don’t have to wish or think anymore because a powerful and really useful browser extension called Firebug can help you do all that. Any designer or developer looking to experiment with different styles on a website in real-time needs...

Slide Show Snippet with JavaScript

By
Many websites nowadays make use of sliders to highlight different content or pages but these slide shows usually appear at the top of the home page. Anyone who deals with content knows the power that images have to keep a reader engaged. In fact, most content creators try to scatter images throughout their text for this very purpose. But what happens if you marry the two concepts together? Taking the slide show concept and inserting it into the content of a web page... Begin by opening up the HTML of your...

New ‘Adaptive Image’ HTML Tag Stirs Controversy

The rising global popularity of smart phones and other small-screen Internet devices has created a number of dilemmas for web developers. Among the most pressing is the issue of serving the proper image files for widely divergent screen sizes. The industry has responded with a variety of solutions, including separate mobile websites that are much leaner in terms of shown images. A new attribute, <img srcset>, has the potential to resolve some of the issues by enabling the desired image size,...

Creating a Slider Control with the HTML5 Range Input

HTML5 introduces a range of new form elements and functions, including the range input type. With the range input element, you can create sliding controls for your site users. There are a number of options to choose from in terms of configuring your range inputs, such as defining the range values and steps. With a little JavaScript, you can capture and respond to user interaction with the range slider control. In this tutorial we will create a basic HTML5 range input slider to resize an image, with a JavaScript...
Load more
Home CSS Deals DesignBombs HTML HTML5 JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress