#CSS Tutorial

[thecodecoven]

Hace unos días, cuando estaba compilando las fuentes para el pack que les subimos, me llegó una duda. Verán, algunas fuentes tienen versiones alternativas o caracteres alternativos. En Photoshop es fácil elegir la opción para usar esas variantes, pero me surgió la duda de cómo se lograría en CSS.

Bueno, al parecer la opción sí existe y se llama font-feature-settings. ¿Es infalible? Nope. ¿Podré usar todos los caracteres que tenga la fuente? No lo sé al cien por ciento. De todas maneras, quise hacerles este post para compartirles mi nuevo descubrimiento.

Tomemos de ejemplo la primera fuente de este pack, Balgon. Lo primero que vemos es el nombre de la fuente con caracteres que no están en los glifos principales, ¿cierto?

Pero si clickamos en "Ver todos los glifos", podremos darnos cuenta que sí están incluidos en la fuente, sólo que bajo un nombre diferente. En el caso de la fuente Balgon, tienen el nombre uniE000, de acuerdo al caracter. A veces, en otras fuentes, estos caracteres alternativos se llaman alt, aalt, salt, etcétera.*

Entonces, si queremos usar estas versiones, basta con agregar lo siguiente:

.tu-clase { font-feature-settings: "salt" 1; -webkit-font-feature-settings: "salt" 1; }

*Si no funciona con "salt", intenta alguno de los otros nombres como alt, aalt, etcétera.

¡Y voilà! Puedes ver el resultado dando click acá. ✨

¡Pero espera, hay más! Si hay más de un estilo alternativo, puedes sustituir el 1 por 2, o 3. Inténtalo y nos cuentas.

[divinector]

Responsive Web Layout with Video Background

[codingflicks]

Responsive Web Layout Design

[thecommoncoder]

🚨 NEW VIDEO ALERT! 🚨

In this video, we’re breaking down the essentials of CSS—syntax, ways to add it to your HTML, key types of selectors, and even some advanced concepts like combinators, pseudo-classes, pseudo-elements and specificity. Enjoy! 🎉

#css #webdevelopment #csstutorial #learncss #thecommoncoder

https://youtu.be/qoNSnSErLJQ?si=eLcSF5AFPZL6mYGl

[codenewbies]

Responsive Website Layout

[frontendforever]

Responsive Animated Website With HTML & CSS

[freefrontend-blog]

CSS Landscape | 2024 #2 Welcome to CSS Landscape digest, where we curate the latest articles, tutorials, and videos to keep you informed and inspired in the world of CSS. In this edition, discover techniques for breaking words effectively, explore innovative CSS button styles, and learn how to handle dark mode with CSS and JavaScript. Dive into advanced tooltip design, captivating border animations, and much more. Stay ahead in CSS trends and techniques with CSS Landscape digest. https://freefrontend.com/css-landscape-2024-03-29/

[tutorialwithexample]

CSS Tutorial: Everything You Need to Know

CSS or Cascading Style Sheets is a fundamental aspect of web development that controls the look and formatting of a website. If you're looking to learn CSS, then you're in the right place. This CSS tutorial will provide you with a basic understanding of CSS and teach you how to use it to style web pages.

In this tutorial, you will learn about the different types of CSS, such as inline, internal, and external CSS. You will also learn how to use selectors, properties, and values to style HTML elements. Additionally, you will learn about CSS box model, layout, and responsive design.

With the knowledge gained from this CSS tutorial, you can easily create a visually appealing website that is both user-friendly and functional. So what are you waiting for? Start learning CSS today and enhance your web development skills.

To delve more into CSS, visit https://www.tutorialandexample.com/css-tutorial for more detailed explanations and practical examples.

[tpointtech1]

CSS Tutorial

This CSS Tutorial teaches you the fundamentals step-by-step. Master styling, layouts, colors, fonts, and responsive design to build visually appealing, user-friendly websites. It is ideal for beginners and web developers looking to enhance their front-end skills.

[tpointtechblogs]

Become a CSS Wizard: Style Like a Pro!

Ready to take your web design skills to the next level?  In this CSS tutorial, you’ll learn everything you need to become a CSS wizard — from styling basics to advanced techniques like Flexbox, Grid, animations, and more. Whether you’re a beginner or looking to sharpen your skills, this guide is packed with tips, tricks, and real-world examples. Style like a pro and transform your websites into stunning masterpieces. Let’s dive into the magic of CSS!

[thecodecoven]

We have noticed we have followers who would also benefit from having these posts in English (or maybe even Portuguese or French, which may come in the future) so we decided to start posting in both languages from now on. Without further ado, let's get into the tutorial.

As I was saying in the Spanish version, this question popped up in my head while searching for fonts. I noticed many of them had alternative characters that were not easily accesible outside of desktop or Photoshop use. But what if I want to use those characters in CSS?

Well, the option actually exists and it's called font-feature-settings. But some things first: Will it always work? Nope. Will I be able to use all the alt types or letters? I'm not 100% sure. Regardless of that, I still wanted to make this post/tutorial to share my findings.

So, let's take the first font in this pack, Balgon. The first thing we notice is that the font name is written with different types, right?

Now, if we click on "View all glyphs", we will see that those glyphs are indeed in the font under a different name. In the case of Balgon, for example, they are uniE000, with every number changing according to each glyph. Sometimes, other fonts use alt, aalt, salt, etcetera.*

So, if we want to use these versions, we need to add the following code:

.your-class { font-feature-settings: "salt" 1; -webkit-font-feature-settings: "salt" 1; }

*If "salt" doesn't work, try using some of the other spellings like alt, aalt, etc.

Voilà! You can see the results here (text in Spanish). ✨

But wait, there's more! If the font has more than one alt type, you can change the number 1 to 2, or 3. Try it and let us know if it worked for you.

[divinector]

CSS Card Flip

[codingflicks]

Image Reflection Effect

[jtpoint]

This CSS Tutorial for Beginners provides a simple introduction to styling web pages. Learn essential CSS concepts like colors, fonts, and layout techniques to create attractive and well-designed websites easily.

[codenewbies]

CSS Image Stack Animation