CSS | gabriel catalano

Archivo de la etiqueta: CSS

17 Stunning Pure CSS3 Menu Techniques

#design 24 agosto 2012 Dejar un comentario

Menu is probably the most important part on many websites. It’s sitting there for merely one single purpose: easy for you to navigate through all the pages. Before CSS3, the background images of each menu item can bring you a heck load of pain, as well as the javascript powered drop-down items and sub-sub menu . Now we are able to create stunning menus only using pure CSS, even including awesome animations. The following pure CSS3 menu techniques and tutorials are for you to experiment and get a hang of it. Let’s get started.

More CSS Techniques from Previous Articles:

Pure CSS Drop-down Menu

Live Demo Tutorial

Stunning Menu in CSS3

Live Demo Tutorial

Code a Responsive Navigation Menu

Live Demo Tutorial

Sigue leyendo →

7 Inspiring Interviews That Every Web Designer/Developer Should Read

#design 24 agosto 2012 Dejar un comentario

•
Written by: Rean John Uehara

It’s already August and the year is about to draw to a close…how are you doing with your work and projects? I know that inspiration is quite often hard to come by, and with our line of work inspiration is mainly the driving force. To give you a boost, why not read these 7 inspiring interviews by famous bloggers, web designers, and web developers, who have garnered success in their fields?

Are you ready to be inspired?!

7 Inspiring Interviews

Four of the interviews below actually focus on how their design blogs became a huge success. These blogs they have started simply as pet projects to teach other people about their passion: web design and web development. In the end, they managed to not only fulfill their wants, but they also managed to create entire communities for designers and developers by providing useful resources. This is one of the reasons why I once asked, Hey Web Designers and Web Developers, Are You Blogging Yet?

The following interviews will redirect to Founder Tips (except #1), 1WD’s sister website where we publish interviews and success stories of people.

Ready to be inspired? Go!

1. An Interview With Chris Coyier – Founder of CSS-Tricks Sigue leyendo →

Free Icon Fonts for Web User Interfaces

Icon Fonts, Six Revisions 17 agosto 2012 Dejar un comentario

by Jacob Gube | Six Revisions

This roundup features 18 free icon fonts that can be used in your commercial projects. The icon fonts in this post are perfect for your app user interfaces (UIs).

What are Icon Fonts?

Icon fonts are font files that have symbols and glyphs (e.g. arrows, folders, magnifying glasses) instead of standard alphanumeric characters.

Icon fonts are like dingbat fonts, but are designed specifically for UIs. Icon fonts, just like other web fonts, use the CSS @font-face rule to display icons in web browsers.

And because they’re treated like web fonts, icon fonts:

Have great cross-browser support (even IE6, for example, can render web fonts using the @font-face rule)
Can be scaled on-the-fly if the user adjusts their web browser settings
Can be rendered with different colors
Can embody font- and text-related CSS properties (like text-shadow andgradient)

See icon fonts in action by visiting my friend Chris Coyier’s icon fonts demo page.

To learn how to use icon fonts, read this tutorial on CSS-Tricks: HTML for Icon Font Usage.

Free Icon Fonts

Below are 18 excellent icon free fonts that have licenses that permit commercial use. I strongly recommend reading the license terms and conditions of any freebie you get online, just to be sure that you can use the free resource for your particular purpose.

1. Foundation Icons Fonts

Number of icons: 137. License: MIT Open Source License.

2. Sosa icon font

Number of icons: 121. License: Custom license (use in commercial projects permitted).

3. Font Awesome

Number of icons: 196. License: Creative Commons Attribution 3.0 Unported.

4. Iconic Icon Set

Number of icons: 172. License: SIL Open Font License and Creative Commons Attribution-ShareAlike 3.0.

Sigue leyendo →

10 buenas practicas para escribir código HTML

Bitelia, Tutorial 8 agosto 2012 Dejar un comentario

Bitelia

La mejor manera de hacer que nuestros sitios web se vean y funcionen correctamente en cualquier navegador, es escribiendo código limpio y que respete los estándares. En la actualidad, la calidad del código HTML presente en cada página es un factor que ayuda a mejorar -o empeorar- el posicionamiento en buscadores, una razón de peso para preocuparnos por escribirlo correctamente.

La lista de buenas practicas que sigue a continuación puede ser percibida por los desarrolladores más avanzados como “básica”, y puede que así sea. Sin embargo, espero que sea de utilidad para todos, en especial para nuestros lectores que recién se inician en este mundo del desarrollo web.

En las primeras versiones del lenguaje -hablo de muchos muchos años atrás- y con los navegadores antiguos, muchas de estas reglas podían omitirse y cada uno establecía su propio estilo, sin que esto preocupara mucho a nadie. Por fortuna, las cosas han cambiado y hoy día somos mucho más exigentes con nosotros mismos.

Existe algunas reglas que debemos respetar, sobre todo ahora que HTML5 comienza a presentarse con más fuerza. Estas reglas no las inventé yo, solo las aprendí con mi trabajo y hoy quiero compartirlas para que todos escribamos HTML de calidad.

Declarar el DOCTYPE correcto

Existen varias versiones de HTML, cada una con sus propias reglas, etiquetas, elementos y atributos. La única manera de que un navegador muestre correctamente una página web es conociendo exactamente la versión de HTML que usa el documento que la contiene.

Para indicarle al navegador la versión de HTML que estamos usando debemos usar la declaración <!DOCTYPE> y debe ser la primera línea de nuestro documento. Y aquí algunos ejemplos:

DOCTYPE en HTML5
<!DOCTYPE html>

DOCTYPE HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

DOCTYPE XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Si te encuentras un poco confundido ahora, puedes utilizar esta referencia donde se muestran las diferentes declaraciones posibles y las diferencias entre ellas.

Recuerda cerrar las etiquetas Sigue leyendo →

Useful Tools, Scripts, and Resources for Front-End Developers

Noupe.com 12 julio 2012 Dejar un comentario

By Louis Lazaris | http://www.noupe.com

If you’re a front-end developer mostly focused on HTML, CSS, and JavaScript, then you’re probably always on the look out for ways to be more productive. In this post we’ll share sometools and other resources for front-end developers that you might find useful to include in your workflow.

Tools and Scripts and Resources, Oh My!

Font Stack Builder by Erin Lawrence

This font stack builder lets you select a font stack and will tell you, using percentages, how likely it is for the fonts to be present on users’ systems. It includes options for a number of different font category styles and summarizes how the different options size up for different operating systems (Mac, Windows, Linux). Very easy to use, and, best of all, it gives you the necessary CSS to copy and paste into your projects.

Browser Support by Paul D. Waite

This simple tool lets you type in the name of any CSS feature (including properties, selectors, at-rules, values, and more) and it will display a simple graphic-based chart that outlines browser support. The individual results’ pages even have links to test cases and the official specification for the selected feature.

CSS Hat

This looks like quite a revolutionary tool. Although it might disturb purists who prefer to code everything by hand, it certainly looks like an excellent productivity tool. In a nutshell, CSS Hat is a Photoshop plugin that converts layer styles in Photoshop to CSS3 code. The site embedsa video review and demonstration that shows the tool in action, so be sure to check that out. The plugin adds conversion support for gradients, opacity, shadows, inner/outer glow, rounded corners, and more. It’s not free, but for $19.99, if it does what they claim it does, it’s well worth it.

WYSIHTML5 (…) Sigue leyendo →

6 novedades para CSS3 que puedes implementar hoy | CSSBlog ES

...and a bit of everything! 27 marzo 2012 Dejar un comentario

Via Scoop.it – human being in – perfección

Cada cierto tiempo van saliendo nuevas propiedades CSS3, todas ellas son muy útiles y sencillas, pero ¿están soportadas por la mayoría de los navegadores?. En esta entrada os mostraré una lista de novedades para CSS3 que sí pueden ser usadas hoy, debido a su gran compatibilidad con los navegadores. Todas ellas las hemos explicado anteriormente en el blog, así que solo recopilaré los enlaces…

Via www.cssblog.es

Web Design Trends in 2012

Webdesignledger.com 20 diciembre 2011 Comentarios: 2

Posted by Jake Rocheleau
http://webdesignledger.com/

It’s that time of year again, where we look into our crystal ball to see what will be the hot trends in web design for the upcoming year. It’s no secret that trends come and go, with some hanging around longer than they should. (Yes, splash page, I’m talking about you.) But trends are a necessity in the development and growth of our craft. Trends are born, improved upon, and often spawn other trends. So as a web designer, when you apply trends to your projects, challenge yourself to expand upon them and make them your own.

As you read this article, keep in mind that the shift in trends from one year to the next may be subtle, and you will probably recognize some of these trends already. But it’s our estimation that the concepts we mention below will grow and become even bigger in 2012.

1. Responsive Web Design

I believe eventually, we’ll all stop talking about responsive web design – not because it will go away, but because it will become what’s expected. However, I don’t think this will happen in 2012. It’s still too new of a concept, and there are many web designers that are not familiar with it at all.

The continued introduction and adoption of more an more mobile devices is what will make 2012 the year of the responsive web site. Web designers and developers will move to the use of fluid layouts instead fixed width, and media queries will find their way into many more stylesheets – allowing more sites to easily be viewed across multiple screens sizes and devices. Sigue leyendo →

Web Design Trends in 2011

Webdesignledger.com 4 enero 2011

Posted by Jacqueline Thomas

http://webdesignledger.com/tips/web-design-trends-in-2011

There is a thin line between design and development, and as we move into a new decade, this line is becoming extremely blurry. Is it enough to draw beautiful mock up in Photoshop? Maybe 5 years ago. These days, the average internet user requires more. All beauty, with no substance, gets boring after a while. If your only goal is to impress a community of fellow designers with your flashy designs, you’ll find yourself quickly beneath the tide. 2011 is not about beauty, it’s about function. The trends for this new year and emerging decade are responsive design, constant connection and virtual reality.

How will you stay relevant as a designer in 2011? The ultimate goal of a designer is not to dazzle but to entangle. Any designer can get ‘oohs’ and ‘ahhs’ that are easily forgotten. The supreme designer is able to create an environment which charms and captivates the user to the point where he does not want to find the ‘Back’ button. Several elements come together to forge such a wonderland: harmonious color scheme, intuitive design, easily accessible information and fast response. Additionally, one can never under-estimate the power of simplicity. Of course, this has always been the case, but in 2011, you are no longer at the forgiving discretion of the desktop, or even laptop, computer. Now, your design must contend with smart phones, netbooks, tablets and the like. Are you ready?

Take a gander at the top 11 trends for 2011.

1. More CSS3 + HTML5

What a gratifying sigh of relief! CSS3 and HTML5 have been on the distant horizon of web design for the past couple of years, but now, in 2011, we see an explosion of it. Designers are finally starting to let go of Flash. However you may feel about Flash, you do know that it does not play well with some of the hot, new technology available to your current and potential visitors. In 2011, you will slowly step away from Flash and embrace the magic known as HTML5. Look at the amazingly similar comparison:

Sigue leyendo →

100 Exceedingly Useful CSS Tips and Tricks

Six Revisions 7 diciembre 2010

by Alexander Dawson

http://sixrevisions.com/css/100-exceedingly-useful-css-tips-and-tricks/

You can never have too much of a good thing–and two good things we rely on in our work are tips and tricks. Nuggets of information, presented clearly and succinctly, help us build solutions and learn best practices. In a previous article, we shared a jam-packed list of 250 quick web design tips. It seems only right to continue the trend by showcasing 100 fresh–and hopefully useful–CSS tips and tricks.

Sigue leyendo →

Why Joe Client Doesn’t Care About Standards

Webdesignerdepot.com 22 noviembre 2010

http://www.webdesignerdepot.com/2010/11/why-joe-client-doesn%E2%80%99t-care-about-standards/

Web standards should be a driving force behind the work of any designer or developer. They provide a scale against which to measure the quality, structure, syntax and methodology of design work.

To explain the benefits of web standards, I’ve compared on my own blog the landscape of the web today with that of 10 to 15 years ago.

Questions related to cross-browser compliance and the necessity of testing extensively before launching still linger, but the standardization of DOM, (X)HTML, CSS and a number of other technologies has made the digital world much more predictable. Sigue leyendo →

Minimalism in Web Design: Clear Perfection

Onextrapixel.com 22 noviembre 2010

By: Tina Zennand
http://www.onextrapixel.com/2010/11/19/minimalism-in-web-design-clear-perfection/

Minimalism in art appeared in the late 1960’s. The main principle of the movement is simplicity in form and content; in order to achieve this, personal expression is removed. The aim of minimalism artists is to build their compositions in such a way that visitors perceive the artwork as deeper and more intense.

It can be achieved by making the themes clear from clutter. Minimalism is often manifested as abstract art, but it can also be very beautiful.

Minimalism in Web Design: Clear Perfection
Image credit: Todd Klassy

Minimalism as a Web Design

Minimalist designs make the simple things simple, and the complex things possible. My aim is to combine simple elegance and functionality to a timeless form. – Xavier Lust.

Minimalism as a web design trend came back not long ago. It was a move away from gaudy, elaborate graphics and design schemes, and a shift back towards simple, understated design. It was a comeback of the design at its most basic and simple elements, free from superfluous shapes and complex color combinations.

I would have written a shorter letter, but I didn’t have the time. – Mark Twain.

Jonathan Ive

Aspects and Features of a Modern Minimal Web Design

In today’s world web minimalism is still all the rage, and the main reason of the trend’s popularity is people’s love for friendly and lightweight yet stylish and unobtrusive simple designs. By simple is not meant primitive. Some of the websites with minimalistic design have a number of shiny effects and use advanced forms of CSS and Ajax. But they seem to favor a cleaner, more clutter-free experience, and put a premium on white space.

So, what are the main distinctive features and aspects that make a modern web design minimalistic?

It is too easy for novices, too difficult for professionals. – A saying about playing Mozart.

Minimizing Content

The core function of a minimalistic design is to be able to present a clear message to the visitors. In order to achieve that, it is necessary to re-think the content and modify it to meet the design’s requirements. You’ll have to remove most of the graphic elements and images, but you should do it wisely, because it is very easy to go too far in an attempt to simplify the layout therefore you risk making the design boring. Sigue leyendo →

Where is the Future of Web Design?

Webdesignledger.com 2 noviembre 2010

Posted by Jake Rocheleau | http://webdesignledger.com/tips/where-is-the-future-of-web-design

Everything seems to be moving at such a faster pace than it used to. We’re seeing instantaneous developments and access to information like never before through the likes of Google and Wikipedia. All of this information has me questioning where the future of web design is heading.

Although it’s not so easy to read the future we can make some heavy conclusions and predictions about where things are heading. With current trends in the design landscape unfolding we’re starting to see paths illuminate and new ideas sprouting up. Those of us who follow these trends will be the designers who can rise above the rest and fill into the new age of technology. Sigue leyendo →

Transparent CSS Sprites

Smashingmagazine.com 1 noviembre 2010

By Trevor Morris
http://www.smashingmagazine.com/2010/10/31/transparent-css-sprites/

One of the most useful front-end development techniques of recent years is the humble “CSS Sprites”. The technique was popularised by Dave Shea on A List Apart in 2004 with his article CSS Sprites: Image Slicing’s Kiss of Death. CSS Sprites are a relatively simple technique once you understand the fundamentals and it can be applied in all manner of ways. A common use is for a graphic intensive navigation, but it can also be useful for buttons or even styling headings with the corporate font.

Sprites are simply a collection of images which are merged together to create a single file. You then use CSS, changing the background-position the image, to display the correct part of the image you need. I often use the analogy of a large object passing a window — you only see what is within the frame.

Over the last couple of years CSS Sprites has been one of the most widely adopted CSS-related techniques. Popularised by the Yahoo’s research and documentation around speeding up your website, many high profile websites implement the technique, including Google and Amazon. There are numerous tutorials which help you get to grips with the techniques and sprite generators which help you create the graphics themselves.

Sigue leyendo →

The Easiest Way to Create Vertical Text with CSS

Net.tutsplus.com 16 octubre 2010

Videos | HTML & CSS

http://net.tutsplus.com/tutorials/html-css-techniques/the-easiest-way-to-create-vertical-text-with-css/

Earlier this morning, I needed to create vertical text for a project I’m working on. After trying out a couple ideas, I took to Twitter to find what sorts of thoughts our followers had on the subject. There were plenty of great responses and ideas that we’ll go over today!

*Note – please refer to “Method 6″ below for more details about proper usage.

Subscribe to our YouTube page to watch all of the video tutorials!
Prefer to watch this video on Screenr?

Method 1: `<br>` Tags

So, one possible (though not recommended) way to achieve vertical text is to add <br> tags after each letter.

view plain copy to clipboard print ?

<h1>
N <br />E <br />T <br />T <br />U <br />T <br />S
</h1>

<h1>
   N <br />E <br />T <br />T <br />U <br />T <br />S
</h1>

View a Demo

Don’t use this method. It’s lame and sloppy.

Method 2: Static Wrapping

With this method, we wrap each letter in a span, and then set its display to block within our CSS.

view plain copy to clipboard print ?

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Vertical Text</title>
<style>
h1 span { display: block; }
</style>
</head>
<body>
<h1>
<span> N </span>
<span> E </span>
<span> T </span>
<span> T </span>
<span> U </span>
<span> T </span>
<span> S </span>
</h1>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Vertical Text</title>

<style>
  h1 span { display: block; }
</style>
</head>
<body>

  <h1>
   <span> N </span>
   <span> E </span>
   <span> T </span>
   <span> T </span>
   <span> U </span>
   <span> T </span>
   <span> S </span>
  </h1>

</body>
</html>

View Demo

The problem with this solution — other than the frightening mark-up — is that it’s a manual process. If the text is generated dynamically from a CMS, you’re out of luck. Don’t use this method. Sigue leyendo →

Free WordPress Themes For Personal Bloggers

Onextrapixel.com 14 octubre 2010

By: Citra Sudiro
http://www.onextrapixel.com/2010/10/12/35-free-wordpress-themes-for-personal-bloggers/

WordPress is already a widely used blogging platform. One of the reasons is the ease of customizing its look to suit your needs and preferences. Many bloggers have designed their theme to stand out among others while there are others who make a living selling such themes.

For those who are not friendly with HTML and CSS yet, we have prepared 35 great resources for WordPress Themes, which are suitable for personal blogging. You can use them for a good start.

mayo 2013
L	M	X	J	V	S	D
« abr
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

Archivo de la etiqueta: CSS

Te gustó compartidlo!

Me gusta:

1. An Interview With Chris Coyier – Founder of CSS-Tricks Sigue leyendo →

Te gustó compartidlo!

Me gusta:

by Jacob Gube | Six Revisions

What are Icon Fonts?

Free Icon Fonts

1. Foundation Icons Fonts

2. Sosa icon font

3. Font Awesome

4. Iconic Icon Set

Te gustó compartidlo!

Me gusta:

Declarar el DOCTYPE correcto

Recuerda cerrar las etiquetas Sigue leyendo →

Te gustó compartidlo!

Me gusta:

Tools and Scripts and Resources, Oh My!

Te gustó compartidlo!

Me gusta:

Te gustó compartidlo!

Me gusta:

1. Responsive Web Design

Te gustó compartidlo!

Me gusta:

1. More CSS3 + HTML5

Te gustó compartidlo!

Me gusta:

Te gustó compartidlo!

Me gusta:

Te gustó compartidlo!

Me gusta:

Minimalism as a Web Design

Aspects and Features of a Modern Minimal Web Design

Minimizing Content

Te gustó compartidlo!

Me gusta:

Te gustó compartidlo!

Me gusta:

Te gustó compartidlo!

Me gusta:

Method 1: <br> Tags

Method 2: Static Wrapping

Te gustó compartidlo!

Me gusta:

Free WordPress Themes… Sigue leyendo →

Te gustó compartidlo!

Me gusta:

Quote of the Day

08:00 AM to 05:00 PM | Mon-Fri

about.me/gabrielcatalano

…the human is the most beautiful imperfection!

Algunos de los Blogs que sigo

fb/gabriel catalano.in.perfection

Social Technologies Strategist, …procastination not Allowed!, I’m a Thinker and a Doer Coordinator

Sigue el blog por Email

Comunidad

Wild Words

Top Clicks

Follow “gabriel catalano”

Method 1: `<br>` Tags