Derokki’s Post

𝑪𝑺𝑺: 𝑨𝒍𝒊𝒈𝒏 𝑰𝒄𝒐𝒏 𝒘𝒊𝒕𝒉 𝑻𝒆𝒙𝒕 "cap" is a CSS unit which is equal to the "cap height", that is, the size of the capital letters in a font. This helps us to easily size icons that lie next to a piece of text to perfectly match the height of the text - no more fiddling around with rem or px units

About Very Important CSS Classes in TailwindCSS

Today I learnt about Css 1) How to include styles I) Internal, ii) external iii) inline 2) Colour system I) Named colors ii) RGB, iii) Hexadecimal or Hexa 3) Text property text-align font-weight text-decoration text-decoration-style line-hight letter-spacing font-size #css #html5

Hey there! 🌟 I've built a converter tool that transforms font files into base64 format. This simple tool enables you to seamlessly embed fonts directly into your CSS files. Try it here 👉🏽 font2base64.netlify.app

⌨️ CSS: Align Icon with Text "cap" is a CSS unit which is equal to the "cap height", that is, the size of the capital letters in a font. This helps us to easily size icons that lie next to a piece of text to perfectly match the height of the text - no more fiddling around with rem or px units 🤩

Recently had an aha moment with CSS units that's too good not to share. The realization hit that there had been a gap in my understanding and application of these units' potential and essence. Pixels (px): Deliver precision for elements that don’t scale, ideal for static details like borders. EM: Adjusts based on the parent font size, making it the go-to for responsive text and components that need to adapt within their environment. REM: Scaling is influenced by the root element's font size, ensuring site-wide consistency in layout and typography. CH: The width of the "0" character is the basis here, which is stellar for enhancing readability by keeping paragraphs ideally between 50-70 characters wide. 𝗤𝘂𝗶𝗰𝗸 𝗧𝗶𝗽𝘀: - px when constancy is needed. - em for adaptability within components. - rem for overall site harmony. - ch for optimal text readability. Have started integrating these units more deliberately into current projects. For more insights, this video is a must-watch: https://lnkd.in/dh5YpHR3 #CSS #WebAccessibility #ResponsiveDesign

Today I learned about CSS Fonts, Text & Color Properties. It was fun learning about these important yet simple topics.

CSS Display CSS display is the most important property of CSS which is used to control the layout of the element. It specifies how the element is displayed. Every element has a default display value according to its nature. Every element on the webpage is a rectangular box and the CSS property defines the behavior of that rectangular box. https://lnkd.in/dUS9Zv8F

Design a photo gallery using HTML & CSS with a gradient background transitioning to a dark color. The title should appear as if it's being written, and the sidebar should appear upon clicking. Additionally, there should be effects when hovering over the elements.

Is the web about to have more beautiful type alignment and sizing? It sure is looking like it! The CSS spec is fixing common height issues with text-box-trim. Now we'll be able to use a typeface's true cap height! Thanks to Jason Bradberry and Piccalilli for the write-up: https://lnkd.in/d5RXfkaA