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. 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. What you CAN do for some extra flair, is change the selection color for different paragraphs or different sections of the page. All I did was use different selection color for paragraphs with different classes: Share On. Cross browser - css rule to disable text selection highlighting. 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! My name is Andreas Blixt. 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: The tabs. 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. This poor bank official was really frustrated. 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. Informational messages 2. Success Messages 3. Warning Messages 4. 1. 2. 3. 4. 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. So, a good UX will always make users happy and businesses more successful. 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 The CSS The jQuery. Style a Select Box Using Only CSS. Top 10 CSS Table Designs. 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. The best part about this method is it can be applied to any HTML element such as div, span, p, a, button, input, etc.
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. Color Gradient Styles The code below is the CSS styling for the orange button. CSS Decorative Gallery. Did you like my previous CSS tutorial on how to create gradient text effects?
I'm using the same trick to show you how to decorate your images and photo galleries without editing the source images. The trick is very simple. All you need is an extra <span> tag and apply a background image to create the overlaying effect. It is very easy and flexible — see my demos with over 20 styles, from a simple image icon to a rounded corner to a masked layer (both decorative and complex). View Demo Gallery Download Demo ZIP What Are The Benefits Of This CSS Trick? Saves Time — You don't have to manually create the decorative template in Photoshop and export the individual image.
Basic Concept (see demo) You need to insert an extra <span> tag within the <div> tag, with which we'll apply a background image to create the overlaying effect. Then in the CSS, the key point you have to remember is: specify the div element to position:relative and the span element to position:absolute. IE PNG Hack Look and Feel.