Articles > HTML

CSS

Recreating the Developer Drive logo with just CSS, no Javascript or Images

I quite like the developer drive logo animation. I remember seeing it a when I first found the site and thought it was simple, yet effective. I also wondered if it would be possible to replicate it using just CSS. In this snippet we'll cover CSS3 transitions and using @font-face to import some custom fonts. The first thing we need to do is import out fonts, I wasn't sure what the current 'd' font is so I have a similar font. The best place to go is www.fontsquirrel.com, you can pick from a wide selection of fonts...

PHP to Static HTML On The Fly

Data driven web sites are da bomb, in my not-so-humble opinion. The ability to drive information through a slim passage and have that information display, in various ways, is without a doubt amazing. Anything can be manipulated, altered, structured, added, removed and decided before it even hits the screen. Systems like WordPress, Joomla, Drupal have had their day in the sun. On the horizon are even more progressive, minimalistic UCGm [User Generated Content management] systems that will have...
CSS

Custom HTML, CSS and jQuery website template!

In this article we're going to design and implement a unique page layout. Our main logo and navigation bar will be locked and fixed onto the left side of the screen, and the larger right side of the screen will be scrollable and hold our main content. Before we start, check out the demo here. Ok, now that you've seen it, let's get started! Our first step will be to set up our sticky sidebar. Sidebar HTML ... Here's the HTML we'll use, place this right under your <body> tag: <div class="sidewrap">...

SEO and Web Development: 5 HTML5 Tags for SEO

The advent of HTML5 has created a new set of opportunities for web developers and site architects. The new system has also forced those unfamiliar with its origins to reassess how they view their site design, especially when it comes to questions of search engine optimization. How will HTML5 interact with the current search engine spiders, such as Googlebot and Bing, and how will those crawlers evolve in this dynamic environment? New Content Tags ... One of the biggest new features in HTML5 is the new...
CSS

Keeping Your Site Up To Speed With Speedy Gonzales

Speed. It’s an important factor in the recent Olympics, the Paralympics and even our day to day lives. Speed is also an important factor when it comes to Google. Their ethos concerns the provision of accurate, relevant search results delivered as quickly as possible to the user. To quote their Webmaster Guidelines: “Monitor your site's performance and optimize load times. Google's goal is to provide users with the most relevant results and a great user experience. Fast sites increase user satisfaction...

SEO, HTML and Web Site Architecture

With hundreds of millions of users entering hundreds of billions of queries into major search engines such as Google, Yahoo and Bing, the importance of designing a site to be search-engine friendly cannot be underestimated. However, even the most experienced designers and developers can make simple mistakes that can cost their site thousands of views and (potentially) uncounted revenues. HTML Issues ... Sometimes, the “old-fashioned” methods are still the most effective. While many SEO...

Add a Simple Google, Yahoo! or Bing Search Box to Your Website

‘Search’ is the web’s most utilized and essential function. The major search engines process billions of keyword requests daily, but there are still some websites and blogs that have yet to incorporate the vital feature. While customized search box solutions are offered by various business entities, I prefer to use only the results from major engines: Google, Yahoo!, or Bing. Many of the commercial packages employ a free trial period to entice buyers, which tends to include very prominently...
CSS

Create Quick and Easy Progress Bar Charts with HTML5 and CSS3

The official January 2011 launch of the robust HTML5 has brought with it a number of powerful coding elements. Among them is the <progress> tag, a very useful tool in putting together quick, attractive online presentations. CSS3 provides a highly flexible methodology for customizing default HTML5 tags. At present, both technologies are undergoing considerable revision. ‘Pseudo-elements’, such as those prefixed by -moz- and -webkit-, were implemented within the CSS3 framework...
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