CSS3 Gradient Buttons Last week I talked about Cross-Browser CSS Gradient. Today I'm going to show you how to put the CSS gradient feature in a good practical use. Check out my demo to see a set of gradient buttons that I have created with just CSS (no image or Javascript). The buttons are scalable based on the font-size. The button size can be easily adjusted by changing the padding and font-size values. What Is So Cool About These Buttons? Pure CSS: no image or Javascript is used. Preview The image below shows how the button will display in different browsers. Button States normal state = gradient with border and shadow styles. hover = darker gradient active = gradient is reversed, 1px down, and darker font color as well. General Styles For The Button The following code is the general styles for the .button class. For more details on border-radius, text-shadow, and box-shadow, read my article The Basics of CSS3. Color Gradient Styles The code below is the CSS styling for the orange button. How To Use My Buttons?
Cross browser CSS slide show 12th April 2006 copyright © stu nicholls - CSS play Information I have had many visitors asking how they could produce a slide show or photogallery using a mixture of portrait and landscape images. Well this is one way that it could be done It works in a similar manner to my previous examples except that I have removed the 2x image on hover (this was a bit of a gimmick anyway) and have gone straight for a click to produce the full size image. Yet again all photographs are taken from the stock.xchng For this to work, without scrolling, your visitor will need a screen resolution capable of displaying the whole projector screen. Hacks have been added to make it work in IE5.5 for people browsing using the standalone version. Cascading Style Sheet If you look at the header of this page you will see that the normal method of loading a file is used for the non-ie browser css files. The slide_show.css file The IE only style sheets are loaded using the conditional comment. The slide_show_ie.css file
Top 10 CSS Table Designs Moving a picture around slowly Cool notification messages with CSS3 & jQuery Nowadays, UX is a key factor when it comes about creating/designing a product or system. To keep users happy, developers struggle to create a good experience and a better interactivity. UX is a term used to describe the overall experience and satisfaction a user has when using a product or system. Notification messages are an important part of the user experience and you can't afford to omit them. In this article, you'll learn how to create some alert messages with CSS3 and jQuery. View demo Message Types Bellow is a list with common notification messages: InfoErrorWarningSuccess Info Its purpose is to inform user regarding a relevant matter. Error When an operation has failed, the user must be notified. Warning This type of message notify the user of a condition that might cause a problem in the future. Success The success message should be displayed after user successfully performs an action. The HTML <div class="info message"><h3>FYI, something just happened! The CSS The jQuery Conclusion Updates
[Valid] Markup Validation of Congratulations The document located at < > was successfully checked as XHTML 1.0 Transitional. This means that the resource in question identified itself as "XHTML 1.0 Transitional" and that we successfully performed a formal validation of it. "valid" Icon(s) on your Web page To show your readers that you have taken the care to create an interoperable Web page, you may display this icon on any page that validates. A full list of icons, with links to alternate formats and colors, is available: If you like, you can download a copy of the icons to keep in your local web directory, and change the HTML fragment above to reference your local image rather than the one on this server. Linking to this result If you would like to create a link to page (i.e., this validation result) to make it easier to revalidate this page in the future or to allow others to validate your page, the URI is < Validating CSS Style Sheets ↑ Top
CSS Message Boxes for different message types Can you believe this: Few days ago I went to my bank to check my credit score with the Credit Bureau. The bank official typed in my personal data and sent a request. Web application responded by displaying a yellow message box with an exclamation icon saying that data processing is still in progress. He checked several more times, but he didn't notice that at one moment the message changed to "Account available". But the message box hasn't changed. He continued to check a few more times and eventually he realized that the request was successful. I don't know what was in the minds of developers and designers who created this application, but it certainly wasn't the user. To prevent this, different message types should be displayed differently. I will show you a remake of CSS message boxes I used on my latest project. Let's first take a quick look at message types. 1. The purpose of information messages is to inform the user about something relevant. Informational messages 2. 3. 4. 1. 2. 3.
Tabbed Navigation Using CSS Introduction The contents of this tutorial – including the images, HTML, JavaScript and CSS – is licensed under an MIT license and is therefore free for you to use. Attribution is appreciated, but not required. Hello, fellow web designer! This tutorial will teach you how to create low-bandwidth tab navigation on a web page using CSS. Throughout the tutorial, I try to explain most of the things I am showing you, at a somewhat basic level. This tutorial follows a few guidelines of mine, which mostly revolve around the accessibility of the web page. The HTML and CSS should validate against the World Wide Web Consortium's respective validators. If your browser is capable of styling content, you'll notice that the text in some paragraphs stand out more. Now that we've got that out of the way, let's get started! Other languages This article is also available in the following languages: Step 1: The structure Cooking up the HTML The title The table of contents Result: That's it! The content The tabs
cross browser - css rule to disable text selection highlighting Overriding The Default Text Selection Color With CSS One of those cool CSS3 declarations that you can use today is ::selection, which overrides your browser-level or system-level text highlight color with a color of your choosing. At the time of this writing, only Safari and Firefox are supporting this, and both in slightly different ways. Fortunately, this can be thought of as one of those "forward-enhancement" techniques. It's a nice touch for those using modern browsers, but it just gets ignored in other browsers and it's not a big deal. Here is the rub: Within the selection selector, background is the only property that works. All I did was use different selection color for paragraphs with different classes: Share On
Inserta cualquier tipografía en tu web con @font-face @font-face es un propiedad de CSS disponible desde CSS2 y que la han incorporado los navegadores actuales (Firefox 3.5, Firefox 3.5, Chrome 4.0, Internet Explorer 5, Safari 3.1, Opera 10). De esta forma ya no estaremos restringidos a utilizar las fuentes clásicas en nuestras páginas y tampoco hace falta utilizar librerías javascript, flash o imágenes para obtener los mismos resultados. Sintaxis Básica El uso de esta propiedad es sencilla, para ello hay que definir un nombre y la ruta donde se encuentra el archivo de la fuente. Por ejemplo en el siguiente código vamos a utilizar la fuente helveticaneue_light.ttf la cual está ubicada en la carpeta fonts y que la nombramos como “HelveticaNeueLight” para utilizarlo posteriormente. Luego para utilizar esta fuente recién declarado lo hacemos mediante la propiedad font-family en donde le pasamos el nombre que hemos definido anteriormente. Sintaxis Completa Como convertir las fuentes Como obtener las fuentes Mas Información