#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.

#tutorial #css tutorial #font tutorial #alt font #foroactivo #rp tutorial

[codingflicks]

CSS Gradient Text Stroke

#html css #css text stroke #css text effects #css #html #frontend #css3 #neduzone #css tutorial #frontenddevelopment #css tricks #html5 #css effects #css gradient #css gradients #gradient text stroke

[divinector]

Responsive Image Gallery with Lightbox Effect

#responsive image gallery #lightbox effect #responsive web design #css image gallery #html css #learn to code #code #frontenddevelopment #css #html #css3 #divinector #css tutorial #css for beginners

[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/

#html #css #frontend #css weekly #css digest #css news #css articles #css tutorial

[codenewbies]

CSS Snow Fall Effect

#css snow fall effects #css snow fall animation #css3 #css tricks #html css #codenewbies #frontenddevelopment #css tutorial #css animation tutorial #css animation examples #html5 css3 #pure css animation

[gordonramsei]

heyyyyyyy  fools  &  ghouls  !  i  had  a  request  on  how  to  properly  install  popup  muse  pages  ,  so  here  i  am  with  a  walk  -  through  +  codepen  for  those  of  u  who  are  visual  learners  (  aka  me  lmao  )  .

#indie rph #rph #coding tutorial #coding cabin #html tutorial #css tutorial #for patreons #for patrons #mine #rec

[bedicoder]

Glowing Search Box Form Effect using HTML & CSS

#front end development roadmap #youtube #htmlcss #webdesign #webdevelopment #tutorials #coding #frontend #learn css #css tutorial #csstricks #css effects #glowing #glowing effect #search form #search bar #learn #Youtube

[freeitools]

Become CSS Developer & start making money

#css #css tutorial #html css #tailwindcss #frontend

[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.

#CSS Tutorial

[jtpoint]

Learn the basics of CSS and how to use it to style web pages with this comprehensive CSS tutorial. From selectors to responsive design, this tutorial covers everything you need to create visually appealing and functional websites. Improve your web development skills today!

#CSS Tutorial

[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.

#tutorial #css tutorial #font tutorial #forumotion #forumactif #alt font

[codingflicks]

CSS Text Hover Animation

#text animation #css text animation #text effects #css text effects #css tutorial #css hover animation #html css #frontend #css #html #css3

[divinector]

Expanding Animation on Hover

#Expanding Animation on Hover #css hover effects #css hover animation #css tutorial #html css #code #divinector #css #html #webdesign #css3 #frontenddevelopment #html5 css3 #css animation examples #frontend #html5 #pure css animation

[diywebsitespro]

Elementor Card Slide Down Animation On Hover CSS

#youtube #Animated slide #elementor #elementorpro #elementor pro #elementor trial #wordpress #wordpress tutorial #wordpresstutorials #wordpresstutorial #css #css tutorial #csstutorial #html

[codenewbies]

CSS Image Stack Animation

#CSS Image Stack Animation #codenewbies #html css #frontenddevelopment #css animation examples #html5 css3 #pure css animation #webdesign #css animation tutorial #html css tutorial #css tutorial

[gordonramsei]

ᝰ ⁺ ｡ glowing animations tutorial / base

hey  my  loves  ,  in  the  source  link  u  will  find  a  link  to  a  my  patreon  where  i  have  created  4  different  animations  (  2  for  texts  and  2  for  boxes  /  containers  / shapes  )  that  are  cute  and  super  customizable  .  this  tutorial  is  very  easy  and  as  long  as  u  have  basic  css  knowledge  i  think  u  all  will  have  a  blast  playing  with  these  .  enjoy  !

#for patreons #css tutorial #coding tutorial #html tutorial #css