CSS Colors and Effects
Create a Pure CSS3 Ribbon
A recent trend in modern web design is the use of CSS3 to add depth to normally bland-looking elements. Things like rounded corners and shadows are being used in extremely creative ways, and today we'll see how to create one of the more commonly used effects known as the ribbon technique.
Declaration of Colors and Borders in CSS
There are several ways that CSS will allow you to make elements on your page stand out. Without some creative styling, most of your page will simply be text and images. While this can be OK in simple situations, most sites will require a bit more flavor. Today we'll see how to make our page elements stand out by using the CSS background-color property along with the border property. Let's jump in and see how it works.
Should designers learn coding?
So ok, nowadays being a Web Designer it's more than creating PSD, but should a Web Designer learn coding? But first, let's recap the previous articles and say that I do agree with WebDesigner Depot that every Web Designer should know:
Smooth Fading Image Captions with Pure CSS3
Learn how to use CSS3 transitions to create nice, animated, semitransparent image captions. Full example and code download included.
Color gradient
The background of a website plays an important role to enhance its appearance. CSS3 has the ability to create color gradients which can be applied advantageously, for an appealing web page.
How to Create a Fancy Image Gallery with CSS3
Even though CSS3 is still in the development stages, it is the new craze that many web developers are excited about. CSS3 is something that will take web development into newer and greater heights, while modernizing the web and allowing web designers and developers to make their creativity a reality. CSS3 allows for web techniques such as: text shadows, rounded borders, animations, custom web fonts, and much more.
Change the mouse pointer cursor on a web page
In this blog post I will explain where to find and how to attach a mouse pointer cursor to a web page or html component.
Image watermark effect to protect your images
This is a very simple watermark effect made with CSS.
This can be used to protect images on your website.
Image opacity effect with CSS and Java Script events
Create image opacity effect using CSS alpha filter and Java Script events.
Use different syntaxes for different browsers.
How To Create Depth And Nice 3D Ribbons
We learned how to realize a nice 3D ribbon and how to play with the drop shadow in Photoshop to simulate depth in a web design layout.
Web Color Basics (A Detailed Guide)
Now let me introduce you to the basics of color also known as colour. Why you ask because most web designers want to know how to add color to their web page or their entire site. Now in HTML and XHTML you have two options for displaying color, which include named colors and hexadecimal codes.
Hex Chart
When adding a color to your webpage with HTML, sometimes you can just type in the name of the color. But more often than not, you'll need to use what's called the hex code, which is something that the browser will be able to understand. Choose a color from the list below and look to its left to get the hex code.
Hexadecimal Color Notation On The Web
When designing elements for your webpage, you will often be called upon to specify a color. For example, the code for a span shown below specifies that the color of the text within the span will be yellow.
Ways of Enhancing the HR Tag
Make your pages load quicker, and more cross browser compatible by using CSS to define your HR tags. Control there color, size weight, possition and more.
Colours by Name, RGB and HEX
Hex, or Hexadecimal, is basically a number system with a different base to our "Decimal" system. In this tutorial, I will attempt to explain how hex colours work.
Changing Text Font and Color in HTML Editor
To increase impression of your future web site based on our web design templates maybe you will need to change text color or font style. There are some ways of doing that.If you want to change part of text or some words do the following. Select text, witch properties you want to modify.
CSS "Watermarking" Effect
This tutorial in HTML will show you how to create a CSS "Watermarking" Effect. The author gives you a simple outline of instructions and necessary code as well as plenty of illustrations to keep on track.
Improved CSS Hover Images
You see a lot of hover effects on web nowadays. When you hover your mouse cursor over a link it usually changes to something else - It doesn't matter if the link is an image or just text, there's usually some sort of hover effect in place. If it's a graphical link the hover effect is usually another image displaying the hover effect. This image is often preloaded on page load so that the user sees the effect right away, but there's also another way to do it. How about using just one image and changing its state/position it with CSS?
CSS Hover Images using Only One Image
You see a lot of hover effects on web nowadays. Images are often preloaded on page load so that the user sees the hover effects right away, but there's also another way to do it. How about using just one image and changing its state/position it with CSS?
Named Colours
Having to memorise hex codes for all of the colours you're going to be using can be a pain. CSS includes a range of 17 common colours that you can slot into your stylesheets in place of a hex code.