👩💻 Difference between drop-shadow and box-shadow
In general, these are two different CSS properties for creating shadows but they are used in different cases and have different features Let's consider them one by one
#box-shadow — adds a shadow to the frame of an element, that is, around its borders. This property works with any elements, creating a shadow that follows the contours of the element.
#drop-shadow — is used with the filter function and allows you to create more complex shadows for graphics and texts. It takes into account the transparency and shape of the element's content, which is especially useful for images and SVG.
@etwebs | #css
In general, these are two different CSS properties for creating shadows but they are used in different cases and have different features Let's consider them one by one
#box-shadow — adds a shadow to the frame of an element, that is, around its borders. This property works with any elements, creating a shadow that follows the contours of the element.
#drop-shadow — is used with the filter function and allows you to create more complex shadows for graphics and texts. It takes into account the transparency and shape of the element's content, which is especially useful for images and SVG.
@etwebs | #css
👍4⚡1
#Pseudo-class
The:is() pseudo-class in CSS allows you to shorten and simplify complex selectors by combining several selectors into one rule.
📌 The main advantage of :is() is that it reduces the specificity of the selector, simplifying writing and preventing style conflicts
Don't forget to React 🤎 for More Content Like this
#css @etwebs
:is() simplifying complex selectorsThe:is() pseudo-class in CSS allows you to shorten and simplify complex selectors by combining several selectors into one rule.
📌 The main advantage of :is() is that it reduces the specificity of the selector, simplifying writing and preventing style conflicts
#css @etwebs
👍5❤3🔥1
🧑💻 Difference between #id and #class in HTML
The id and class attributes in HTML play an important role in organizing the structure of a page and applying styles. While both attributes can be used to set styles or work with JavaScript, there are key differences in their use:
#id — used for elements that appear only once, such as a site header, main block, or footer;
#class — used to group elements with the same styles or behavior, such as product cards, buttons, or content sections that are repeated on a page.
❤️ — if it was useful
💯 — if the base
@etwebs
The id and class attributes in HTML play an important role in organizing the structure of a page and applying styles. While both attributes can be used to set styles or work with JavaScript, there are key differences in their use:
#id — used for elements that appear only once, such as a site header, main block, or footer;
#class — used to group elements with the same styles or behavior, such as product cards, buttons, or content sections that are repeated on a page.
❤️ — if it was useful
💯 — if the base
@etwebs
❤9
Which HTML version introduced semantic elements like <article>, <section>, and <nav>?
Anonymous Quiz
11%
HTML4
14%
XHTML
75%
HTML5
0%
HTML3
Which attribute is used to open a link in a new tab?
Anonymous Quiz
0%
target="_self"
62%
target="_blank"
6%
target="_top"
32%
target="_newtab"
CCS
Which CSS property is used to make a website responsive?
Which CSS property is used to make a website responsive?
Anonymous Quiz
11%
z-index
68%
flexbox
9%
position
13%
float
CSS
What does the vh unit stand for in CSS?
What does the vh unit stand for in CSS?
Anonymous Quiz
47%
Viewport Height
23%
Vertical Height
16%
Variable Height
14%
Viewport Horizontal
JavaScript
Which keyword is used to declare a constant variable in JavaScript?
Which keyword is used to declare a constant variable in JavaScript?
Anonymous Quiz
12%
var
6%
let
71%
const
10%
static
JavaScript
What will console.log(typeof []) output in JavaScript?
What will console.log(typeof []) output in JavaScript?
Anonymous Quiz
40%
object
32%
array
13%
undefined
15%
null
👍4
CSS Variables
CSS Variables (Custom Properties) let you reuse values like colors, font sizes, or spacing across your site, making your code cleaner and easier to manage.
Why Use CSS Variables?
#Efficiency Reuse values without repeating code.
#Consistency Keep design uniform across your site.
#Flexibility Update styles globally by changing one value
How to Use:
Define in :root:
Apply with var():
Use CSS variables to write cleaner, scalable, and maintainable styles
@etwebs
CSS Variables (Custom Properties) let you reuse values like colors, font sizes, or spacing across your site, making your code cleaner and easier to manage.
Why Use CSS Variables?
#Efficiency Reuse values without repeating code.
#Consistency Keep design uniform across your site.
#Flexibility Update styles globally by changing one value
How to Use:
Define in :root:
:root { --primary-color: #3498db; } Apply with var():
button { background-color: var(--primary-color); } Use CSS variables to write cleaner, scalable, and maintainable styles
@etwebs
🔥5
If you have any comments, please let me know about the content or anything else here Join the discussion group https://news.1rj.ru/str/codebyion
ʀᴇɢɪx
If you have any comments, please let me know about the content or anything else here Join the discussion group https://news.1rj.ru/str/codebyion
And also 🔔 Don’t miss out! Only 67% of our members have notifications enabled. Make sure to turn yours on so you stay updated! Also, don’t forget to drop a comment below Thank you! 🙏
👍5
This media is not supported in your browser
VIEW IN TELEGRAM
Simple but very beautiful hover effect for an image using CSS
The idea is to initially make the image black and white using the CSS filter
Telegram | tiktok
The idea is to initially make the image black and white using the CSS filter
grayscale() by setting it to 100%, and then change the value to 0 on hover. And also change the size of the image itself by setting scale:1.05Telegram | tiktok
🔥7👍2
Which of the following is NOT a primitive data type in JavaScript?
Anonymous Quiz
15%
String
13%
Number
57%
Object
15%
Boolean
👍4