Stepping away from the relative safety of white or light background in web design can sometimes be quite challenging. If it is designed properly, using a dark background, the effect can be very impressive. Here are 20 beautiful and creative Dark CSS Website Designs. Few days ago we did a similar post on Dark Websites Design.
Valentine’s Day is near and love is in the air. Red is the color of season and people will be buying those Valentine Red Roses at double the price to impress their loved ones. We are deviants and thus we chose to explore Red in the website designs. Red is an intense color and not many designers like to experiment with it but the brave few have nevertheless have got their hands dirty in Red. Take a look at some of them.
CSS and Flash web galleries are great places to get inspiration from. Most galleries showcase loads of good and original concepts which can help you and inspire you to create your own better products. Many blogs have mushroomed up which showcase the best and the most exciting websites daily and I do find myself checking them once in a while to get my dose of inspiration.
It is a great CSS web gallery and web development resources website powered by Wordpress. The web developer of any caliber can learn something new from this.
Best Web Gallery showcases the stylish CSS and Flash websites. It’s maintained by Nick La, the founder of Web Designer Wall and N.Design-Studio which means quality of selection is assured.
Some of the best free Web Based tools for optimizing and formatting the CSS .
Clean CSS : Clean CSS is a powerful CSS Optimizer and formatter. Basically, it takes your CSS code and makes it cleaner and more concise. You can set your desired compression level and customize compression option. It prints out a line-by-line report afterwards to show you exactly what’s been changed.
CSS Optimizer: CSS Optimizer is a web tool for optimizing the CSS Code. Enter either a URL or Copy & Paste the stylesheet into the box and click the option Go. It’s a simple tool that’s “plug-and-chug” there are no options, so the optimization procedure will remain the same for all your inputs .
Format CSS: It allows you to paste your valid CSS code, correcting and standardizing your source code. There’s several available settings and rules that you can apply to achieve the type of format you desire including ordering your CSS alphabetically, de-capitalizing your code, and some options for dealing with styles.
Following is the code for a plain HTML form:
<form action=”#”>
<p><label for=”name”>Name</label> <input type=”text” id=”name” /></p>
<p><label for=”e-mail”>E-mail</label> <input type=”text” id=”e-mail”/></p>
<p class=”submit”><input type=”submit” value=”Submit” /></p>
</form>
It looks like this in your browser:
Pretty dead, huh? Why not bring some life to this old fashioned, simple html form with some cool CSS code?
Read the rest of this entry »
Today we will be creating borders for our web page using CSS. If you are a web designer or developer, then I am sure that you must be aware of the invincible flexibility that CSS offers to any static as well as dynamic web page. I too got to experience the power of CSS with you while writing some tricky( & funny as well !) CSS codes during earlier posts on justskins.
So beginning with the tutorial, we will first write the html code which will interact with the CSS code. The HTML code required here is pretty simple. We will be utilizing four areas of the web page to create border i.e left, right, top & bottom. Hence, we will first assign four <div> ids to the above mentioned page elements.
Step 1: Here’s the HTML code:
<div id=”left”></div>
<div id=”right”></div>
<div id=”top”></div>
<div id=”bottom”></div>
This CSS tutorial will guide you in creating a complete CSS based navigation menu for your website. Now you can leave apart the almost unachievable task of fixing those monstrous html codes as now the Cascading Style sheets have come up with a solution which not only removes your dependency on HTML for creating navigation menus, but also makes your website navigation appear attractive & more productive than ever before.
The whole CSS code discussed below will use a tiny image ( save it:
) as background image for the navigation menu. Ok now let’s not waste time & skip to the main action right away. The first step in creating a CSS based navigation menu is writting the HTML code for the navigation.
Step 1: Create a simple HTML code for menu with unordered list and enclose the whole code in <div> tags like this:
<div id=”menu”>
<ul>
<li><a href=”#”>Services</a></li>
<li><a href=”#”>About us</a></li>
<li><a href=”#”>Contact us</a></li>
</ul>
</div>
Using PHP & CSS to change the style of a Webpage
In one of my previous posts on CSS Guide, I had discussed about how different style values can be implemented dynamically with php on the basis of user input. Today we will be moving a step further & we will utilize the power of the PHP date() function to dynamically change the embedded stylesheets on the basis of the local system clock time. We are gonna make three separate stylesheets each containing different values for the different elements of our webpage. The main funda is, we intend to change the look of our web pages,automatically, on the basis of variation in time viz. morning, day & night.
We just need to put a Read the rest of this entry »
This is a simple tutorial article which describes how you can dynamically generate a CSS code using PHP. Generally every programming book & online resource stresses more on the integration of PHP with HTML. Here we are gonna change the rule. We will show you how the repeated tasks such as setting the color of a webpage element in CSS can be automated with PHP.
I have divided this CSS tutorial into two parts. The first part of this CSS tutorial will tell you how to manually set the different hexadecimal values of colors in php variables & using those php variables directly instead of explicitly declaring the repeating colors over again.
Prerequisites: This tutorial requires a basic understanding of CSS, PHP concepts & their syntax as a prerequisite.
The following Steps describe how to use PHP in a CSS file & getting the same result in no time.
Step 1: Read the rest of this entry »
Invisible Text: Firstly let me make it clear that it is not the case of hiding the text by changing its font color to match the background color of a webpage. Sometimes we are required to put some text on the page which should not be visible to the user, but the web browser. For eg. suppose we want that some element on a web page should be readable only by a screen reader & not by our users. In such situations we can apply the following CSS trick:
Set the display attribute of the element to “none” i.e
display: none;
It should be noted that the above CSS trick doesn’t work for Post- IE6 web browsers.
PDA-Friendly Page Layout: The webpage which looks perfect on your computer system might look obscure & absurd when displayed on your handheld PDA devices. This is because of the difference in the rendering techniques employed by a desktop based web browser & a PDA based web browser. CSS has special provisions for correctly displaying a document over PDA devices.
The following code can be used to call up a document meant for PDA devices:
<link type=”text/css” rel=”stylesheet” href=”handheldstyle.css” media=”handheld” />
The above CSS trick overrides any inline CSS code & renders the page in exactly the PDA friendly layout.
3D Push Button Effect: Read the rest of this entry »
