Hello there! 😃 In CSS, we have a really helpful property called backdrop-filter. It’s like a special filter that applies grayish shades to the backgrounds. A useful tool when we want to focus on a part of the webpage without changing the actual element itself. Mm… 🤔 that is a little bit tricky! Isn’t it? Let’s grab a cup of coffee ☕ and move forward! We will clarify everything in this post about using a grayscale backdrop filter. 👩💻
How the backdrop filter works
So, how does this property really work? We will begin by setting the backdrop-filter property to grayscale(percentage), where the percentage determines the intensity of the grayscale effect, ranging from 0% to 100%. A value of 100% turns the color into a complete grayscale color, while a value of 0% will keep the element’s original color shades without any grayscale effect.
This CSS property is not quite noticeable on black or white backgrounds because it adds shades of gray, and black is already the darkest shade while white is the lightest one. In simpler words, black and white will not get converted to grayscale because it already belongs to the darkest side of grayscale.
For the filter to work properly, as a first step, we need to set the background-color property of the parent element. Afterward, we add the backdrop filter to the child elements we want to apply the grayscale effect. The backdrop filter will only affect the child element’s background color but not its content, text, images, etc.
As a result, the parent element maintains its original background color, while the child element’s background is desaturated, creating a monochromatic, grayscale effect.
Create a grayscale backdrop filter effect
This HTML and CSS code above creates a <section> element (father) with a <p> element (child) inside. The section has a background color in a shade of pinkish peach, defined by the hex color code #f99bab. Initially, the paragraph inherits the same background color.
<section><p>...</p></section
HTML
/* PARENT ELEMENT */section {background-color: #f99bab; // a shade of pinkish peach}/* CHILD ELEMENT */p {backdrop-filter: grayscale(50%);}
CSS
We continue with the <p> element styled by a backdrop-filter with a grayscale value of 50%. This effect visually desaturates the paragraph’s background (the paragraph inherits its background from its parent, the section). This means that the colors where the backdrop filter is applied (the area behind the element) will be desaturated to 50%. As a result, a grayscale effect will be applied where the colors are halfway between their original color and grayscale while leaving the content unaffected.
In simple terms, by setting this code, we create a parent element with a shade of pinkish peach-colored background, and its child element has a somewhat muted, desaturated appearance while at the same time retaining some of the original pink color.
Hello there! 😃 Today, we’ll explore how we can calculate the CSS line height property, which defines the height of a line on a webpage. Each line contains the main content (text) as well as the space above and below the content ↕ (line-height). While the default value for desktop browsers is 1.2, we should keep in mind that it can vary depending on the font family. We can also set a custom line-height according to our preferences.
⛔ Please note that the system does not accept negative values. The default value will be automatically used if a negative value is entered.
Below, I have drafted a plan that might help you understand things better. Check it out:
Below is an example to explain this CSS property more analytically.
HTML structure for CSS line height
We create an HTML document with four headings <h1> . All headings have the same content (text) but different classes, each with unique characteristics concerning the line-height.
We will move forward with our CSS code and add the necessary characteristics. The first heading has a class with line-height: normal, the second one has a class with line-height: 200px, the third one has a class with line-height: 300px, and the fourth has a class with line-height: -300px (⛔ negative value).
I am using different background-color for each class to easily distinguish them and notice the results clearly. 😉
In the image that follows, we can see the differences between the four headings regarding their line-height ↕.
Utilizing the line-height CSS property can significantly improve text clarity and visual appeal, creating a comfortable reading experience for users. ✨ 😃
The CSS nth child selector is an extremely useful tool for targeting and styling the nth element within a group of similar HTML elements on a webpage. It’s really handy for organizing your code and helps you pick elements based on their position in a sequence. It’s also part of a larger group of selectors.
You can apply specific styles like color or size to just that nth item or to combinations with the nth item in a list or group, making it different from all the others.
The “nth” is a mathematical term that refers to any position in a list or sequence, such as the first, second, third, and so on. A sequence is a set of numbers or elements that follow a particular pattern or rule.
Below are examples of utilizing this selector. Let’s proceed and explore its uses in more detail. 🧐
We will use the same HTML code snippet for all instances. We have seven child elements inside our body element. Each one represents an ice cream cone. Yes! You read correctly! An ice cream cone! Let’s make our learning a bit fun! The empty cones remain unaffected, while the cones that have ice cream strawberry 🍓 flavor 🍦 on top are styled based on thenth-child()selector.
Let’s imagine that what you see below would be rendered on the screen if each div child element was actually a cone.
Styling the first element with nth-child(1)
The nth-child(1) selector targets and styles only the first element. So, in our case, we add ice cream strawberry 🍓 flavor 🍦 only to the top of the first cone. All the other cones remain unaffected.
div:nth-child(1) {background-color: pink;}
CSS
* If we want to target the third child, use:nth-child(3), and similarly for other positions.
Styling only the last element with nth-last-child(1)
The nth-last-child(1) selector targets and styles only the last element as it counts backward. That’s why we added the word last in our selector. So that it will pick the first (1) element from the endof the list.
div:nth-last-child(1) {background-color: pink;}
CSS
* If we want to pick the fourth child from the end, we set the:nth-last-child(4), etc.
Select all elements apart from the last one
Combing the nth-last-child selector with the not pseudoclass, we can target and style all elements apart from the last one. That’s why, in this example, we added the word :not and then the word last in our selector, indicating we wanted all but not the last one(1). 🤔
*If we want to pick all elements apart from the first one we can erase thelastword and set the:not(:nth-child(1))etc.
Target every odd child element
Using the word “odd” in our nth-child selector we can target and style every other element, specifically the 1st, 3rd, 5th, 7th and so on
*Odd numbers are those that, when divided by 2, always leave a remainder of 1.
div:nth-child(odd) {background-color: pink;}
CSS
Target every even child element
Just as we did for odd elements, we can also target even elements by using the keyword “even” in our nth-child selector. This allows us to style every second element, specifically the 2nd, 4th, 6th, and so on
*Even numbers are those that can be divided by 2 and leave no remainder.
The nth-child() selector offers great flexibility, allowing us to create combinations that target multiple child elements simultaneously.
Selecting elements based on multiplying by the nth-child()
By using nth-child(3n) we target every third element. In this example, the 3rd element is the first one selected. From there, we move three steps forward forward to the next target, which is the 6th element.
The n in 3n starts at 0 and increases incrementally with each integer (0, 1, 2, 3…). By multiplying n by 3 we target elements at positions that are multiples of 3 (0, 3, 6, 9…).
div:nth-child(3n) {background-color: pink;}
CSS
Select elements based on multiplies with the nth-child(), counting backward
When using the nth-last-child(3n)selector we target every third element, but this time, it starts counting from the end. In our case, we have seven elements. Starting counting from the 7th one, the 5th element is the first we pick. Then we continue by taking three steps backward to the second choice, which is the 2nd element.
The n in 3n starts at 0 and increases incrementally with each integer (0, 1, 2, 3…). The number 3 we assign to n shows multiplies of it, but we also have the last word in our selector, which indicates we start counting from the last child towards the first one.
div:nth-last-child(3n) {background-color: pink;}
CSS
Pick elements that appear after a specific point
This one seems more complicated. 😰 Let’s analyze it a bit more! 🧐
When using the nth-child(n + 3) selector, we are targeting the third element and all subsequent elements. If we use n + 5, it would start counting from the fifth element onward, including the fifth element itself, and continue until the end.
The (n) starts at 0 and increases incrementally with each integer (0, 1, 2, 3…). The (+ 3) means that the selector starts matching from the 3rd element onward.
Here’s how n works under the hood:
n=0 selects the 3rd element (0 + 3 = 3). n=1 selects the 4th element (1 + 3 = 4). n=2 selects the 5th element (2 + 3 = 5). n=3 selects the 6th element (3 + 3 = 6). n=4 selects the 7th element (4 + 3 = 7).
div:nth-child(n + 3) {background-color: pink;}
CSS
Select elements that appear up to a specific point
Using nth-child(-n+3), the selector targets elements up to a specific point, setting a limit to which element will stop. In our case, it picks and styles all the elements up to and including the third element.
The (n) represents 0. The (-n) by itselft is not used in CSS selectors because it does not correspond to any valid child positions. However when combined with a positive number (e.g. :nth-child(-n + 3)), it allows to select the child elements up to and including the specified position, such as the 3rd child. The (+ 3) part of the selector means that the selector matches elements up to and including the 3rd element..
Here’s how n works in practice:
n=0 selects the 3rd element (-0 + 3 = 3). n=1 selects the 2nd element (-1 + 3 = 2). n=2 selects the 1st element (-2 + 3 = 1). n=3 selects no child element (-3 + 3 = 0). 😮
div:nth-child(-n + 3) {background-color: pink;}
CSS
:nth-child(n + X) targets every element from the Xth onward, ensuring the Xth element is also included. WHILE :nth-child(-n + X) targets every element up to and including the Xth element.
Pick a range of elements
If we combine the previous two types of the nth-child selector, we can pick and style a portion of elements. In our example, all elements between the 3rd and the 6th element. Both the start (3rd element) and the end (6th element) are included.
The :nth-child(n + 3) selector targets all children starting from the third element onward.
The :nth-child(-n + 6) selector targets all children up to the sixth element.
Select the first element and then every third element
The n starts at 0 and increases by 1 with each step, representing all integer values (0, 1, 2, 3, …)
Using the expression (n + 1) we determine which elements we want to pick.
By applying the multiplier 3n, we instruct CSS to target every third element in the sequence.
Combining all those charectistics we get:
When n is 0, 3n + 1 => 3 * 0 + 1 = 1, so it selects the 1st child. When n is 1, 3n + 1 => 3 * 1 + 1 = 4, so it selects the 4th child. When n is 2, 3n + 1 => 3 * 2 + 1 = 7, so it selects the 7th child, etc.
div:nth-child(3n + 1) {background-color: pink;}
CSS
Choose the first element and then every third element, counting backward
Same as before, but this time, we start picking elements from the end, as indicated by the word last in our selector.
The n starts at 0 and increases by 1 with each step, representing all integer values (0, 1, 2, 3, …)
Using the expression (n + 1) we determine which elements we want to pick.
By applying the multiplier 3n, we instruct CSS to target every third element in the sequence.
Let’s see how that works:
When n is 0, 3n + 1 => 3 * 0 + 1 = 1, so it selects the 1st child from the end which is the 7th child. When n is 1, 3n + 1 => 3 * 1 + 1 = 4, so it selects the 4th child. When n is 2, 3n + 1 => 3 * 2 + 1 = 7, so it selects the 7th child from the end which is the 1th child.
Choose the second element and then every third element
The same logic applies as in the previous example, except that in this case, we are using subtraction with the selector 3n-1
The n starts at 0 and increases by 1 with each step, representing all integer values (0, 1, 2, 3, …)
Using the expression (n - 1) we determine which elements we want to pick.
By applying the multiplier 3n, we instruct CSS to target every third element in the sequence.
Now that we know what each part does, let’s dive in and see how CSS works when using this selector:
When n is 0 then 3n - 1 => 3 * 0 - 1 = -1, so it selects no child. (I know 🥱) When n is 1 then 3n - 1 => 3 * 1 - 1 = 2, so it selects the 2nd child. When n is 2 then 3n - 1 => 3 * 2 - 1 = 5, so it selects the 5th child, etc.
div:nth-child(3n - 1) {background-color: pink;}
CSS
Using + or - in the selector may sometimes result in the same outcome. In our example, doing 3n+2 or 3n-1, ends up targeting the second element and then every third element onward. However, it’s important to understand that the underlying logic is different.
Select the second element and then every third element, counting backward
Same as before, but this time, we start picking from the end since we have the word last in our selector.
The n starts at 0 and increases by 1 with each step, representing all integer values (0, 1, 2, 3, …)
Using the expression (n - 1) we determine which elements we want to pick.
By applying the multiplier 3n, we instruct CSS to target every third element in the sequence.
Let’s dive in and see whats happening:
When n is 0 then 3n - 1 => 3 * 0 - 1 = -1, so it selects no child. When n is 1 then 3n - 1 => 3 * 1 - 1 = 2, so it selects the 2nd child from the end. When n is 2 then 3n - 1 => 3 * 2 - 1 = 5, so it selects the 5th child from the end, etc.
Although the nth-child() selector is made in order to target specific positions or patterns among children, we can also use it to match all child elements at once by assigning the n inside the parenthesis ().
The n lets the selector match elements at any position inside the parent element. This flexibility allows us to pick elements and apply styles without specifying an exact position. As a result, we can target all possible positions. 😎 Additionally, we have all our cones full of delicious strawberry 🍓 flavor 🍦 ice cream! So, this is by far the sweetest choice!
div:nth-child(n) {background-color: pink;}
CSS
I hope you enjoyed our little trip to the “ice cream CSS nth child” land!! 🎉 🎉 Keep going till next time!! 🍓 🍦 ✨
Hello everybody 😃 Today, we will discover the art of the powerful CSS blur effect. Get ready to meet the amazing backdrop-filter CSS property. We’ll dive 🤿 into the world of adding visual elegance and depth to our web design, and we will learn to create captivating and stunning web elements. Let’s get started!
Adding basic HTML structure
Let’s get started with the HTML setup. We create a parent div named custom-container for the background and a child div named blurry-container where we will apply the CSS blur effect. Follow along for the step-by-step process.
We move forward with the CSS structure by preparing the background. I opted for a striking and colorful background image as it is more impressive and gives prominence to our effect, setting background-image. I also add background-repeat which determines how the background image is shown, and background-size which sets the size of the image, in our case we want to fill the entire display. Completing it with height: 100vh for full-screen coverage.
The next step is to create a “place” where we can accommodate our blur, I believe a box would serve this need. To begin, I create one by setting the appropriate width and height along with its border and border-radius. I utilized borders to ensure my box remains visible. Whether to keep them or not is entirely up to you. The design can still look great in both cases. Feel free to choose whichever option suits your preference or the project’s requirements. 😃
We create the blur effect using the pseudo-element :before. To manage this, we have to set position:relative to the parent element and position: absolute to the child. The child element needs the content CSS property to be assigned an empty string value in order to be displayed. Despite the recent code adjustments, you won’t notice any visible changes on the screen just yet. 😭
.custom-container { ...position: relative;.blurry-container { ...&:before {position: absolute;content: ""; } /* end of before */ } /* end of blurry-container */} /* end of custom-container */
SCSS
Let’s proceed with our effect. 🥁 We do so by adding the backdrop-filter CSS property to :before pseudoelement. Increasing the pixel value intensifies the blur effect by creating a stronger visual impact. I’ve applied a 12px blur effect, but you have the flexibility to adjust it according to your preferences. If you desire a clearer look, feel free to reduce ⬇ the pixels. Alternatively, for a stronger fade effect, you can increase ⬆ the pixel value.
Remember that the blur effect can sometimes get out of control on a web page because of how it’s applied to an element. When you use the blur effect, it makes the element bigger, like it’s expanded, depending on how much blur you want. So, the more blur you add, the larger the element becomes. Because of that, the element might grow so big that it spills out of its box or crashes into nearby elements. 😟
Observe how the blur CSS property overflows in the current setup above. To correct that, apply the overflow: hidden CSS property to the PARENT element custom-container. With this modification, you can control the blur effect and prevent it from causing a mess on your web page.
.custom-container { ...overflow: hidden;}
SCSS
… and boom 🥳 here it is! Our blur effect displayed flawlessly, as intended!
Complete code solution
Below is the full code referenced in this blog post. Feel free to copy and use it in your own projects. If you have any questions or encounter any issues, don’t hesitate to reach out for assistance. You can easily copy the desired code snippet by clicking on the copy icon, located in the top-right corner of each snippet.
<sectionclass="custom-container"><divclass="blurry-container"><divclass="title">Hello World</div></div><!-- end of blurry-container --></section><!-- end of customer-container -->
Below, I include the code for my post’s cover. I also added a title to see how we add text over the blur effect. 😎
<sectionclass="custom-container"><divclass="blurry-container"><divclass="title">Hello World</div></div><!-- end of blurry-container --></section><!-- end of customer-container -->
In today’s fast world, especially in web development and programming, the pressure to continuously deliver elevated code can be really stressful. Long hours spent in front of laptops and tough deadlines. Additionally, the persistent dream of perfection and leadership can negatively affect even the most passionate and devoted developers. This intense environment often leads to burnout syndrome, a state of emotional, physical, and mental exhaustion that can significantly impact your personal and professional life.
Signs that Indicate You Are Experiencing Burnout Syndrome
Burnout can be incredibly challenging, especially in programming. It is often caused by long hours, high pressure of time, and a constantly changing technological landscape that requires continuous learning and adaptation. Below are some ways to recognize burnout syndrome. Identifying these signs early can help you take action to manage and prevent this situation, ensuring you stay healthy and productive.
Battling (or Paddling) Against the Tide of Decreased Productivity
We begin with the strongest and most obvious sign of burnout. You are not productive anymore. Your energy for work drops, and you feel unable to cope with continuous demands. You find it hard to concentrate, and eventually, you find yourself making more mistakes than usual. Occasionally, it’s hard to finish tasks on time. Additionally, meetings can be confusing, sometimes you might feel like you are not really there. Working with others can also be tricky because you constantly feel that you are not good enough for this job and can’t cope with your work duties.
Another clear indicator of burnout is that stress can result in a lack of interest and motivation in things that were previously meaningful to you. Tasks that once excited you now feel like enemies that only push you and cower 🥊 you to the corner. There is a lack of motivation. Although you want to be creative and productive, you always feel tired and lazy, making it difficult to start new projects or complete things you’ve already taken on. As time goes by, this becomes more and more intense, and eventually, you lose interest at all. You don’t care about work, life, activities, or, worse, about people. Everything seems stressful and meaningful.
The Awful, Never-Ending Exhaustion
A further prominent signal of burnout is the persistent feeling of exhaustion, which encloses both physical and mental tiredness. This condition appears as a constant sense of tiredness, accompanied by feelings of frustration and despair that may become part of your daily experience. Additionally, you may experience difficulties with memory retention and problem-solving, and you may lack the ability to concentrate and think creatively or critically. Moreover, this level of exhaustion usually leads to physical symptoms such as headaches, sleep disorders, and various stress-related health issues.
Eventually, you develop extremely negative and critical feelings about yourself, your work, and those around you. It’s hard to find pleasure and happiness in your accomplishments and in your relationships with colleagues or other people outside of your working environment. Also, you seem to be experiencing a noticeable emotional disconnect. You appear to feel detached from your work and associates, and as a result, you find yourself seeking isolation on a frequent basis.
When things get tough, it’s reallyimportant to take care of yourself first. Adopting the following methods can help you overcome burnout and maintain a healthier, more balanced work and life approach.
Set Boundaries: Saying No and Prioritizing Tasks
The most important factor in avoiding burnout is to educate yourself to say no. Refuse to take on additional work if you are already busy, and don’t feel obligated to do things you are not responsible for. It is crucial to respect your working environment, but it’s equally important for your working environment to respect you. Furthermore, prioritize your tasks. Break your projects into small, manageable pieces. In addition, create a diary with clear work hours and guard your personal time by avoiding reviewing emails or working late into the night or on weekends. Also, it is really critical to understand that you have to stop using your personal mobile phone or social media for work.
One effective way to maintain productivity and mental well-being during work is to ensure you get enough sleep, eat healthy food, and aim for balanced meals consumed regularly throughout the day. Taking care of your body helps your mind stay sharp. Additionally, include regular breaks on a daily basis. Taking short breaks, such as going for a short walk, can significantly contribute to refreshing your mind and re-energizing your body. Dedicate time to engaging in both cognitive and physical activities that fill you with joy and satisfaction beyond your work duties. For example, enjoy cognitive and creative activities such as painting and making puzzles or physical activities like volleyball and running. Hobbies can improve a relaxing and vital break, allowing you to restore energy and also enhance your mental and physical health.
Build a supporting network
Remember to seek support from others when you need it. Talk to friends, family, or colleagues about your situation and express your feelings. Sometimes, just sharing can relieve some stress. Count on your loved ones for advice in order to simplify your thoughts and discover other viewpoints. If you continue to feel crushed by burnout, seeking assistance from a therapist or counselor could be beneficial. They can suggest techniques for facing your difficulties and propose strategies to help you cope and recover.
Finally, keep at least one afternoon inside the week for yourself and schedule Nothing. Yes, you read it correctly. Nothing. React spontaneously. Think. What do you really need at this moment? What are your thoughts right now? Don’t think of anyone else. Just yourself. Turn an afternoon into a mini vacation and spend it focusing only on you. What do you miss most? Is it a walk? 👟 Maybe shopping therapy? 🛍 No? So, what is it? Something more relaxing? Reading a book 📗 close to your cat? 🐈 Still no? Oh! I found it! You just need to grab a coffee, a donut, your skateboard and play in the park! Oh, yes! That’s it for today! Something brand new is coming your way next week! Get ready and enjoy every moment!
Recognizing and handling burnout syndrome is crucial for having a sustainable and also satisfying career in web development and programming. By setting boundaries and realistic goals, prioritizing self-care, fostering a healthy work-life balance, surrounding yourself with people and activities you prefer, and ensuring free time, you can protect yourself from the harmful effects of burnout. Remember, you are as important as the code you write. Take time to rest and recharge, and you’ll find yourself not only more productive but also more passionate about your work. See you around! 🎈✨
Hey there! 😃 In today’s technology-driven world, it’s super important to learn how to create an awesome transparent button. A well-designed button not only adds to the product’s aesthetic appeal but also enhances the user experience. Therefore, it’s essential to create buttons that are both visually appealing and functionally efficient.
Let’s work together, utilizing only HTML and CSS, to design the perfect button that stands out and enhances your app’s user-friendliness.
HTML basic structure
First, we prepare our HTML code snippet. We need to create a parent element with the class .wrapper that acts as the base of the button. Next, we add a child element within the parent element that will serve as the clickable part of the button. This child element has the class .custom-button . Doing so will help us create an interactive button that users can click on, to perform an action. How amazing is this! 😎
Let’s continue by using our CSS magic and making our button look cool! For this post, I am writing CSS using Sass syntax. If you would like to convert it to vanilla CSS and don’t already know how, I’d suggest you use an online Sass —CSS converter.
Create the base for the transparent button
First of all, we set the background-color of the body to dark grey and also add some extra positioning properties in order for our button to be centered. We will be using the same color for our button, by applying the background: transparent CSS property, along with some width and height of our choice in the .wrapper class.
We are also applying a border-radius of 80 pixels and a box-shadow with carefully selected shades of grey. It is important to select the appropriate shades to ensure the desired outcome. 😉
For our example, we are placing the clickable part of the button in the center of the base. For that reason, we are using the flex method.
Take a look at the image below to see what’s currently rendered on screen.
Create the clickable part of the transparent button
We proceed with the clickable area of our button. After applying some basic dimensions, we need to make sure the background is set to transparent as we did before, with the base part of the button. After that, we adjust the border-radius and box-shadow to inherit, so that these attributes would be identical to the base. To remove any natively applied border styling we use border: none.
Below, you see what’s on the screen now, with the clickable (top) part of our button added.
Add the button text
To begin, we use the flex method to center the button’s text appropriately. Then we add the text using the :before CSS pseudoselector, adding “hover me” as the content. I used a bold, 45-pixel blue text with a black shadow effect. For enhanced readability, I opted for the Arial font-family as it is really legible. 🆒 ✨
.custom-button { ...font-family: 'Arial';font-size: 45px;color: #12528e; /* a shade of blue */font-weight: bold;display: flex;align-items: center;justify-content: center;&:before {position: absolute;content: "hover me";text-shadow: -2px-1pxblack; }}
SCSS
In the following image, we can see what’s displayed on the screen now.
Now, is the appropriate time to implement the hover effect. We can achieve this by adding the :hover CSS pseudo-classwith the cursor set to pointer. After that, we will use :before again to modify the text content to display “click me”.
Below, we can observe 🔎 the hover effect in action. Moving the cursor over the button, immediately transforms from arrow ⬆ into pointer 👆(hand), and the text content changes. The hover effect is a widely used design technique that adds interactivity and visual interest to a webpage.
Apply the active effect of the transparent button
Now, we can add the :active state to the button to finish our work. Once we click on the button, the active state will be triggered. To make it look more realistic and impressive, we adjust the box-shadow CSS property.
Additionally, we will modify the text content using the :before CSS property and change it to be inspiring and display the text “Good Job!” in indigo color with white text-shadow.
.custom-button { ...&:active {box-shadow: 0px-1px3px#969393, /* top side */inset0px5px3px#b7b5b5, /* inset top side */inset1px0px3px#969393, /* inset left side */inset-1px0px3px#969393, /* inset right side */inset0px-4px3px#969393; /* inset bottom side */&:before {content: "Good Job!";color: indigo;text-shadow: -2px-1pxwhite; } }}
SCSS
At this moment, you can witness 🧐 the active effect in action. Take a moment to observe and analyze how the effect is taking place and what impact it has. This will help you gain a better understanding of the process and its outcomes, which can be useful for future reference and decision-making. 😇 So, good luck with your work!
Complete code solution
Below is the full code referenced in this blog post. Feel free to copy and use it in your own projects. If you have any questions or encounter any issues, don’t hesitate to reach out for assistance. You can easily copy the desired code snippet by clicking on the copy icon, located in the top-right corner of each snippet.
Hi there! 😃 In this post, we’ll learn bit by bit how to create a CSS text reflection effect. When we say reflection, we’re referring to a mirror-like effect that looks like the text reflects on a surface, much like the way we see our reflection in a mirror.
This is a simple yet amazing way to enhance the appearance of your text. Let’s analyze our effect so that you can easily follow along.
HTML structure
We will begin with our HTML structure. As you can see below, I prepared a div with the class .reflection-text , this is where our effect will take place.
<div class="reflection-text">HELLO WORLD</div>
CSS
CSS foundation
Let’s move forward with the CSS basic structure. We start with defining the background. It’s worth noting that using radial-gradient can make our effect more impressive. 😃
body {background: radial-gradient(lightgreen, darkgreen);height: 100vh;}
CSS
Below, we can see the background we just created.
In web development, we use the flex method in order to center our text. Then we will enhance its appearance, by making some adjustments. We will set the font-size to 100 pixels, select the “Roboto” font-family, and choose white as the text color.
Adding the CSS structure for the reflection effect
Creating a reflection can be achieved by using pseudoelements like :before and :after. To ensure this works properly, we need to include position: relative in our .reflection-text class.
.reflection-text { ...position: relative;}
CSS
Now, we are ready to proceed and create our reflection by adding the :before pseudoelement with all the necessary properties, as shown in the following code snippet.
🟢 To begin, we add the text “HELLO WORLD” to create another text element with the same content. This new text will serve as our reflection. Then, we set position: absolute so that we can move our reflected text below the original text. We use the top property to move the reflected text 65 pixels from the top, but you can always move the reflection in any direction you prefer. It is important to position the text and its reflection closely together for a more realistic reflection effect. 😉
🟢 We move forward and use the transform CSS property to rotate the text by 180 degrees
and then flip it horizontally using scaleX(-1). Now we have the perfect reflection! Let’s continue and make it more realistic.
🟢 In the next step, we will adjust the color of our reflected text. To achieve this, we will utilize the linear-gradient CSS property and specify the direction as downwards. This will create white gradients, with the top appearing more intense and gradually fading towards the bottom of the text.
🟢 It is commonly known that gradients cannot be directly applied to texts. Don’t worry! 🤔 We already have the solution to this problem. For now, let’s give a quick explanation. To create a clipped linear background pattern for text, first, we add the -webkit-background-clip: text property, and at the same time, we set the color to transparent, and our text automatically turns to transparent. In that way, our text takes the background: linear-gradient as its real color.
🟢 For a more transparent text, we can adjust the opacity. The lower the opacity, the more transparent our text becomes. So, here we are! Our reflection is ready! 🥳
🔖 It is always an option to use black or any other color in our work. Below, I’ve included examples of texts with black, purple, and green colors. It’s important to remember that the key factor is to set the correct gradients at the linear-gradient property. That way, we can create respective shades. Therefore, please give extra attention to that! 😊
Hey there! 😃 Exploring CSS linear gradient techniques is a fantastic approach to fashion vibrant, colorful mixtures. Gradients give us the flexibility to choose any desired direction, defined by their starting and ending points. Mixing a minimum of two colors is fundamental, yet the potential for blending expands further, enabling us to achieve seamless transitions or pronounced shifts based on our design requirements.
Today, let’s dive into the exciting world of CSS linear gradient techniques. 🌈✨ Picture a smooth transition of colors in a straight line, adding a sleek and dynamic touch to your web design. With linear gradients, you can smoothly transition between colors. You have the power to guide the eye seamlessly from one color to another. Whether it’s a subtle shift or a striking contrast, mastering linear gradients empowers you to enhance the visual appeal of your web projects.
Ready to discover 🔍 the art and versatility behind linear gradients? Let’s get started! 💻
Definition of a radial gradient
A linear gradient is a visual effect that allows us to smoothly shift between colors in a straight line inside any shape we want. It’s like blending multiple colors together in a straight line pattern, allowing us to create colorful and visually appealing backgrounds or effects for elements on our website.
A linear gradient is a visual effect that allows us to smoothly shift between colors in a straight line inside any shape we want
The default CSS linear gradient
We will begin our exploration with the default linear gradient, characterized by its top-to-bottom direction. The following code snippet and image provide a clear representation.
.linear-default {background-image: linear-gradient(red, green);}/* we are free to use "deg" too */.linear-default {background-image: linear-gradient(180deg, red, green);}
CSS
From side to side
We can adjust the direction of our gradients whenever we need to. To help you understand this better, take a look at the example below, where we changed the default direction to to right.
We are also free to choose any direction we want to top , to right , to bottom (the default direction), to left.
At any point, we also have the flexibility to alter the orientation of our gradients along the diagonal path. To illustrate this concept, consider the following example with the to bottom right direction.
Here colors would spread from the top-left corner to the bottom-right corner. We can combine any corner with its adjacent sides, to top left, to top right, to bottom left, and to bottom right.
If we want to create a linear gradient with less blending (colors have more distinct limits this way) and maintain the same space for each color, we can use equal specific stops in the gradient by adding % percentages.
🕵️♂️ In this example, I’ve divided the space into 5 segments, but I left a 4% blend among each space in order to create a smooth but small transition.
The percentages between the color stops determine how smooth the transition between colors is.
Red (0% – 18%): defines a red color stop that starts at 0% and ends at 18% of the gradient.
Between 18% and 22%, there is no specific color stop defined. This gap represents a transition zone where the gradient transitions smoothly from red to green.
Green 22%, green 38%): defines a green color stop that starts at 22% and ends at 38% of the gradient.
Between 38% and 42%, there is no specific color stop defined. This gap represents a transition zone where the gradient transitions smoothly from green to blue.
Blue (42% – 58%): defines a blue color stop that starts at 42% and ends at 58% of the gradient.
Between 58% and 62%, there is no specific color stop defined. This gap represents a transition zone where the gradient transitions smoothly from blue to purple.
Purple (62% – 78%): defines a purple color stop that starts at 62% and ends at 78% of the gradient.
Between 78% and 82%, there is no specific color stop defined. This gap represents a transition zone where the gradient transitions smoothly from purple to orange.
Orange (82% – 100%): defines an orange color stop that starts at 82% and ends at 100% of the gradient.
Without blend
Finally, it is really useful to know that we are able to create non-smooth transitions. In the following example, we will see a gradient with distinct color stops at specific percentage intervals, resulting in a distinct color transition from red to orange. Each color stop abruptly changes to the next color at the defined percentage points.
🕵️♂️ In this example, I’ve divided the space into 5 equal segments without blending among each other. So, we create multiple color stops without transitions.
Red (0% – 20%): defines a red color stop that starts at 0% and ends at 20% of the gradient.
Green (20% – 40%): defines a green color stop that starts at 20% and ends at 40% of the gradient.
Blue (40% – 60%): defines a blue color stop that starts at 40% and ends at 60% of the gradient.
Purple (60% – 80%): defines a purple color stop that starts at 60% and ends at 80% of the gradient.
Orange (80% – 100%): defines an orange color stop that starts at 80% and ends at 100%
Welcome to this post! Today, I will share with you how to create a fascinating CSS shine effect animation. To make it more interesting and attractive, I have already prepared an avatar (using only HTML and CSS) and added the animation to it. If you’re curious about how I made the avatar, you can find the complete avatar code at the end of this post. Please feel free to enclose it in your animation if you wish. Remember, the most important thing is to have fun and let your creativity shine. 😉 ✨
For the moment, let’s focus on making this astonishing animation!
HTML structure
To begin, we need to create the base for our project by adding the HTML structure. We’ll start by creating our avatar-container , which will serve for our manipulations. I will carefully guide you through the following steps to achieve the desired results. Once we have a good structure in place, we can build upon it our CSS shine effect.
<divclass="avatar-container"> ... Here goes my avatar</div><!-- end of avatar-container -->
HTML
CSS basic structure
Moving forward, let’s focus on organizing our project’s visual appeal by adding the CSS structure. Our first step will be to center the avatar-container on the screen, therefore, we can take advantage of the display: flex property of the body element. This will help us align it along the horizontal and vertical axes, creating a perfectly centered layout. With this basic structure in place, we can then proceed to add styles and create everything we have in mind. 😊
In order to place the avatar inside the container, it is essential to set it position: relative. Then we can place the components we want to include for our avatar, just by adding position: absolute to them.
.avatar-container {position: relative;min-width: 320px;height: 320px;background-color: transparent;box-shadow: inset0020px;border-radius: 50%;} /* end of avatar-container */
SCSS
CSS Shine Effect
All the necessary preparations have been completed. Let’s now move forward and make the shine 🥳 effect.
Create the shine
Firstly, we use :before pseudo-element which allows styling specific parts of an element without adding extra content to HTML. It behaves as a child of the chosen CSS element. In our case, avatar-container takes extra data only by using :before CSS property.
Next, we set width: 30% and height: 100% as this is a proper space in our example.
We also set background-color: rgba(255, 255, 255, 0.4) as it is the most suitable for the CSS shine effect.
We continue with z-index which overlaps the stack order of an HTML element. In simple words, it manages which HTML element should appear on top of others. The higher the stack order, the higher the element will be placed at the top of the stacking order. A really useful CSS property that is responsible for layering. To achieve the desired effect over my avatar, I have specified a z-index: 4 as my avatar has multiple layers. Without multiple layers applied to it (in simple words without the avatar), z-index CSS property is not necessary. It’s good practice when we use z-index to count close numbers. We can set positive and negative integer values.
.avatar-container {position: relative;width: 320px;height: 320px;background-color: transparent;box-shadow: inset0020px;border-radius: 50%;overflow: hidden;&:before {position: absolute;content: "";width: 30%;height: 100%;background-color: rgba(255, 255, 255, 0.4);transform: skewX(-20deg);left: -120px;z-index: 3; } /* end of before */ } /* end of avatar-container */
SCSS
The image below displays a preview of the code mentioned above.
Transform the CSS shine effect
Afterward is necessary to add overflow: hidden to avatar-container, as we want to hide the content that flows over our container’s bounds.
We continue with transform: skew as a way to add inclination to our shine.
Finally left: -120px keeps our effect in the appropriate place, -120px left out of the avatar-container , in order to be invisible. As we previously used, overflow: hidden anything outside of the avatar-container is not visible, that’s why in this pick, below, we can’t see our effect. It’s still there though! 😄
HINT
💡 Well, maybe at this point it might be a good idea to temporarily disable the CSS property overflow: hidden and observe the current position of the effect. By doing so, one can see if the effect is working as intended and make any necessary adjustments. The effect is now positioned -120 pixels to the left, as this is the starting point from where the effect will begin to move.
Create an animation for the CSS shine effect
To finalize my work, firstly, I’m adding the animation CSS property animation: <animation-name> <animation-duration> <animation-iteration-count> which is responsible for the way our animation behaves.
Secondly, I add CSS @keyframes which is used to control the style of the animation at different points in time. In this post, we want our shine to move rightwards, starting from -120px left to 350px left and then turning back to -120px left again.
By combining these 2 properties we end up having the desired animation result, that is, moving our shine every 5 seconds, forever (infinite), from -120px to 350px and back.
🚫 It is required to connect these two properties. We do so by giving a name to the @keyframes and putting the same name on the animation property. In our case, this name is “shine”.
.avatar-container { ...&:before { ...animation: shine 5sinfinite; } /* end of before */} /* end of avatar-container *//* My animation */@keyframesshine {0% {left: -120px; }50% {left: 350px; }0% {left: -120px; }}
SCSS
💡 If you want to see the whole move of the CSS shine effect you can once again disable the CSS property overflow: hidden to avatar-container and observe the effect. Isn’t it great? 😄
🔖 Please be informed that you have the flexibility to modify the background-color: rgba(..., ..., ..., ...) CSS property at any point to adjust both the color and opacity of your shine effect. In this context, I have chosen to generate a grey shine, as this shade is widely recognized and utilized.
Container’s color -> background-color: #c4c0c0 (grey)
Complete avatar code
Below, I include my HTML and CSS avatar code.
<divclass="avatar-container"><divclass="hair-long"></div><divclass="face"><divclass="ear ear--left"><divclass="earing earing--left"></div></div><divclass="ear ear--right"></div><divclass="hair-front"></div><divclass="eyebrow eyebrow--left"></div><divclass="eyebrow eyebrow--right"></div><divclass="eye eye--left"><divclass="eyelash eyelash--left"></div><divclass="eyelash eyelash--left1"></div><divclass="eyelash eyelash--left2"></div><divclass="eyelash eyelash--left3"></div><divclass="eyelash eyelash--left4"></div></div><!-- end of left eye --><divclass="eye eye--right"><divclass="eyelash eyelash--right"></div><divclass="eyelash eyelash--right1"></div><divclass="eyelash eyelash--right2"></div><divclass="eyelash eyelash--right3"></div><divclass="eyelash eyelash--right4"></div></div><!-- end of right eye --><divclass="nose"></div><divclass="lips"></div></div><!-- end of face --><divclass="body-avatar"><divclass="neck"></div><divclass="t-shirt"></div><divclass="dungarees"><divclass="pocket"></div><divclass="strap strap--left"><divclass="button button--left"></div></div><divclass="strap strap--right"><divclass="button button--right"></div></div></div><!-- end of dungarees --></div><!-- end of body --></div><!-- end of avatar-container -->
Hello everybody! In this post, we will analyze the CSS first child selector, one of the most useful selectors in CSS. We utilize the CSS first-child selector when we want to target and manipulate only the first element among a variety of elements of the same type. Note that when we refer to types of elements, we mean HTML tags like paragraphs (<p>), headings (<h1>, <h2> …), lists (<li>), and so on.
We often apply the CSS first child selector to list items (<li>), but it can be used with any type of element. Below, I have prepared some examples to help you understand how to use the CSS first child selector depending on your needs.
Alternatively, we can use the CSS nth child selector like this :nth-child(1) for the same purpose, but it’s more generic as it allows the selection of any child based on its position.
In addition to providing all the necessary CSS syntax for each first child case we describe, we have also included Sass syntax under each code snippet if you are using a Sass pre-processor.
CSS first child selector: List element
In the following example, the HTML structure consists of an ordered list (<ol>) with three list items (<li>), all colored indigo.
Then, we add the CSS rule, which selects only the first item and applies a red color to it.
/* Applies indigo color to all list items */li {color: indigo; }/* Applies red color only to the first list item */li:first-child {color: red; }/* OR */li:nth-child(1) {color: red;}
CSS
🔖 When we work with Sass, our code will be structured as follows:
li {color: indigo;&:first-child {color: red; }}/* OR */li {color: indigo;&:nth-child(1) {color: red; }}
SCSS
When using the :first-child selector in CSS, it targets the very first element within its parent. When we add a new item to the beginning of the list, this new item becomes the first child of the list, and the previous first item now becomes the second one. This change causes the :first-child selector to now target the newly added item instead.
CSS first child selector: Non-list element
In the example below, we set the first child selector for paragraphs. The HTML structure consists of a <div> containing three paragraph (<p>) elements. By default, all HTML elements have black text color, so paragraphs will appear in black.
By applying the CSS first child selector, it selects the first <p> element and apply the text color red to a white background. As a result, the first paragraph appears in red with a white background, while the subsequent paragraphs maintain their default styling.
/* Applies red color and background white to the first paragraph*/p:first-child {color: red;background-color: white;}/* OR */p:nth-child(1) {color: red;background: white;}
CSS
🔖 When working with Sass, our code will be structured as follows:
p {&:first-child {color: red;background: white; }}/* OR */p {&:nth-child(1) {color: red;background: white; }}
First child CSS selector applied across multiple parent containers
In this example, we can see a different approach, as most times, we have multiple HTML elements to manipulate within a document. In our case, we have two div elements, each containing two paragraph (<p>) elements colored black.
<div><p>First paragraph inside the first div</p><p>Second paragraph inside the first div</p></div><div><p>First paragraph inside the second div</p><p>Second paragraph inside the second div</p></div>
HTML
The CSS rule div p:first-childselects the first <p> element within any <div> and applies the specified styles to it. As a result, the first paragraph within each <div> will display in red with a white background, while the remaining paragraphs will retain their default styles. This demonstrates how the :first-child selector can be used to style the first element within a number of parent containers. 😉
/* Applies red color and white background to the first paragraph inside each div*/divp:first-child {color: red;background-color: white;}/* OR */divp:nth-child(1) {color: red;background-color: white;}
CSS
🔖 When using Sass, our code will look like this:
div {p:first-child {color: red;background-color: white; }}/* OR */div {p:nth-child(1) {color: red;background-color: white; }}
SCSS
First child CSS selector targeting the first element of the first parent
In the following example, we have two div elements, each containing two paragraph (<p>) elements colored black.
<div><p>First paragraph in the first div</p><p>Second paragraph in the first div</p></div><div><p>First paragraph in the second div</p><p>Second paragraph in the second div</p></div>
HTML
the CSS rule div:first-child p:first-childselects only the first paragraph (<p>) within the firstdiv and applies the specified styles to it. Thus, the first paragraph in the first div will be displayed in red with a white background, while the second paragraph will remain in its default black color.
The second div, remains unaffected by the styles applied to the first div, showcasing how to apply specific styles selectively. 😉 This approach is really helpful for applying specific styles to elements in complex layouts.
/* Applies red color and white background to the first paragraph of the first div*/div:first-childp:first-child {color: red;background-color: white;}/* OR */div:nth-child(1) p:nth-child(1) {color: red;background-color: white;}
CSS
🔖 When we work with Sass, we will write our code as follows:
In our last example, we have the opposite case. How not to select the CSS first child. The HTML structure consists of an ordered list <ol> containing three list <li> elements.
The CSS rule ol li:not(:first-child) selects all <li> elements within the ol apart from the first one and applies the specified styles to them. Because of that, all list items apart from the first one will be displayed in red, while the first list item will retain its default color, black.
/* Applies red color to all paragraphs except for the first one*/olli:not(:first-child) {color: red;}/* OR */olli:not(:nth-child(1)) {color: red;}
CSS
🔖 When we work with Sass, we will write our code as follows:
ol {li:not(:first-child) {color: red; }}/* OR */ol {li:not(:nth-child(1)) {color: red; }}
Impostor syndrome, also known as impostorism, is the feeling that you’re not as good as others think you are, even when you have proof of your success. In simple words, lack of confidence. It is often accompanied by the fear of being exposed as a fraud.
It can affect anyone, regardless of their accomplishments. It can make you doubt yourself and believe that your achievements are due to luck rather than your own skills. This feeling can impact everyone, from students and professionals to famous people.
In our competitive world, many people struggle with these thoughts. Realizing impostor syndrome and learning how to deal with it is essential for building confidence, maintaining a healthy and positive mind, and, by extension, enhancing one’s quality of life.
How to recognize if you suffer from impostor syndrome?
Recognizing impostor syndrome can be the first step toward managing it. Below, I will outline some of the most important signs to watch out for.
Shadows of yesterday
It often originates from our childhood and the way we grew up. It is widely accepted that many parents can either overly compliment or criticize their children, sending mixed signals that can confuse them. They hesitate to let their children try new things, fearing others will criticize failure and cause ridicule. In that way, children get used to the idea that they are not worth the opportunity to try. These behaviors leave imprints 🐾 on children’s minds and get deeper and deeper day by day. Eventually, they end up feeling like pawns, these lowest-value ♟ pieces, on a chessboard. Instead, they should encourage their children to try new things and welcome failure as a valuable learning experience, regardless of others’ thoughts.
Later, as an adult, impostor syndrome affects you as you have convinced yourself that you are a “broken vessel” and not well prepared for real life. You may even notice that you tend to set extremely high standards for yourself. You struggle to overcome the past and prove that you deserve something like everyone around you. You might feel disappointed when you don’t complete some goals, even if, many times, those plans are utopian. On the other hand, when you complete your goals, you will catch yourself downplaying your victories as you continue feeling that you are not capable of handling things.
Masquerade – The False Sense of Deception
Another clear indicator that you might struggle with this awful syndrome is that you often feel exhausted from over-preparing or overworking to cover up your falsely claimed lack of skills. You feel like you’re “faking it” at any moment, doubting and challenging yourself about your own abilities. Deep down, it seems like hiding your real self and wearing a mask that doesn’t fit right. I have to note that it’s a really confusing situation. It’s as though you repeatedly place hurdles in your own path and sabotage yourself.
Finally, the fear of failure. This fear can be so strong that it literally makes you feel stuck. You become anti-social. It stops you from being creative and taking risks that could help you learn and grow. It prevents you from taking on new challenges, seeking opportunities, or making decisions. You may constantly compare yourself to others, feeling that you’re not as talented or capable despite evidence to the contrary. Eventually, it can make you feel really unhappy and even affect your mental health. You will soon start feeling lonely, helpless, anxious, and weak, and occasionally depression and isolation can take you down.
Handling impostor syndrome involves reconsidering, which means changing how youthink and react to yourself and your plans for life, whether they are accomplishments or failures.
Embracing Self-Love: Accepting Your Situation and Valuing Yourself
Start by accepting your feelings. Keep in mind that many people experience these same thoughts. You are not alone. It’s just a common reaction to high pressure and expectations. Practice self-compassion by treating yourself with the kindness and understanding you would offer a friend. Be kinder to yourself. Try to avoid negative thoughts and replace them with more balanced and positive thinking.
Setting Achievable Goals: A Pathway to Success
Setting realistic goals. This can be the most crucial decision. Breaking down big tasks into smaller, manageable steps will help you handle them better, feel less stressed, and keep moving steadily toward your goals. Also, believe it or not, it’s important to celebrate each achievement along the way. Whether small or big, each step signifies a victory on the journey toward your goals. Do not underestimate it!
Start keeping notes. It serves as a powerful tool for self-reflection. Write down your personal accomplishments as a strong reminder of your capabilities and successes. Maintaining a diary with plans is substantial evidence of your growth, boosting you to dive into future challenges with faith and enthusiasm. Checking ✅ your notes is always a good idea! Celebrate your successes with pride and take time to examine your failures. By understanding what went wrong, you pave the way for future triumphs. Be confident! You will blossom in your next attempt.
Discovering Strength Through Support
Reaching out support from others is absolutely essential, too. Let it be ingrained in your memory that you are incredibly valuable to some people. This unique sense of being heard and understood can be extremely comforting and validating for you. Talk to friends, family, or mentors about your feelings. Trust them and lean on their shoulders. You can count on their love and help. They can offer honest opinions and critiques, multiple perspectives, and, most importantly, remind you of your worth! After all, they are connections that can open doors to new opportunities and experiences. How calming is that?
Eventually, it’s time to fight with your ghosts! Build self-confidence.If impostor syndrome persists and affects your life significantly on a daily basis, consider professional help from a therapist or consultant. They can provide invaluable guidance and propose techniques to empower you. Furthermore, they will help you overcome these feelings and reveal your strengths and skills. Always remember you belong to yourself and you are free to live your life as you wish!
Overcoming impostor syndrome requires time and persistence. It involves regularly reminding your own value, celebrating your accomplishments, and sometimes getting help from others to change how you think. By recognizing it, you have to take steps and fight it. You will start to believe in yourself and appreciate your achievements. Remember that occasional doubts are normal, but they do not define who you are. Sooner or later, understanding and fighting impostor syndrome helps us reach our full potential and enjoy life to the fullest.
Are you ready to go? 🧨✨ Wishing you all the best! 💖💖
Hello! In this post, I will show you how to create a visually appealing CSS 2d card with flipping animation that activates when you hover over it. To enhance the design, I have added an avatar and integrated the animation with it. If you are interested in how I created the avatar, you can check out the complete avatar code at the end of this post. You are free to use it in your animation or customize it to your liking. Enjoy! 😉
For now, let’s move forward and create this incredible animation!
CSS Flipping card animation on hover
The following HTML and SCSS (Sass) code makes a card flip around. Using the X-axis and Y-axis which are two lines that intersect, helps us determine the position of a point in a two-dimensional area.
Let’s analyze our code one step at a time:
HTML structure
We will begin with the HTML structure. We create a parent container called .flip-wrapper. This container acts as the parent element for our animation. Inside it, we have a child element with the .flip-card class, this is where our animation happens. Next, we divide the child element into two parts: the front side and the back side. On the front side, we’ll add the .avatar-container and place the avatar inside while on the back side, we’ll add the .text-container class and add some text.
<divclass="flip-wrapper"><divclass="flip-card"><divclass="avatar-container"></div><divclass="text-container"><h1>Hello</h1><div><i>How are you today?</i></div></div></div></div>
HTML
CSS Basic structure
In our CSS code snippet, first of all, we set the background of our whole page to pink. 🐷🐷
Moving on to the .flip-wrapper container, we specify its dimensions, giving it a fixed width and height of 300 pixels. To make a circular appearance, we apply a border-radius of 50%. If you desire, you can maintain the square ⬜ shape. I chose this rounded ⚪ design because it makes it easier for us to observe the effect we’re aiming for. 😉
Next, we focus on the .flip-card element. We set the position: relative property and then its witdh and height to 100% to ensure it covers the entire available space. We also add a white background-color and a subtle gray shadow effect. To maintain the circular theme, we apply a border-radius of 50% to this container too.
Finally, we set the position: absolute property in both .avatar-container and .text-container classes. In that way we will be ready to place the content we want on both, the front and the back, sides of our card.
This is what’s rendered on our screen at the moment.
Adding the hover effect
In order for our effect to function as intended we have to work with both the parent and the child element. We begin with the parent element, where we apply the :hover effect and change the cursor to a pointer (you can pick any cursor style you prefer).
.flip-wrapper { ...&:hover {cursor: pointer; }}
SCSS
Preparing the front side of my flipping card
I added an avatar on the front side of my flipping card. You can add whatever you want (some text, maybe, or an emoticon ✏️) or you can leave it empty, though it is not really useful for observing the flipping.
.avatar-container { ...}
SCSS
In the following image, we can see how the front side of our flipping card would be. Nice! Isn’t it? 😃
Preparing the back side of my flipping card
Here we prepare our text’s style. We keep the default black color and we centered our text based on the display: flex method.
We are free to create flipping animations on both axis X and Y. Below, I prepared two examples. The first one is for axis-Y while the second one is for axis-X. Let’s break it down and see them analytically. 🧐
Flipping animation on axis-Y
In order to achieve our goal we have to combine the following CSS properties.
transform: rotateY(180deg) We begin by setting the transform property, which is responsible for the flipping, inside the hover effect. It is also necessary to add it to the class that represents the back side of our card, in our case the .text-container class, otherwise, our text won’t be rendered on the screen when we hover over the card.
transition: transform 6s & transform-style: preserve-3d We continue by combining these two properties inside the .flip-card class. The first one shows us the exact, time in seconds (s), our effect will take place while the second one makes the children of an element appear as if they are positioned in a 3D space. So this property gives us the impression that the descendants (children) of our element are located within a three-dimensional space.
backface-visibility: hidden We finalize our work with the backface-visibility property that defines whether or not the back side of an element should be visible when facing the user. The back face of an element is a mirror image of the front face being displayed.
Boom! 🎉 This is our wonderful flipping 2d card animation for the X-axis!!
Complete avatar code
Below, I include my HTML and CSS avatar code.
<divclass="avatar-container"><divclass="hair-back"></div><divclass="hair hair--left"></div><divclass="hair hair--right"></div><divclass="hair-clip hair-clip--left"></div><divclass="hair-clip hair-clip--right"></div><divclass="ear ear--left"></div><divclass="ear ear--right"></div><divclass="face"><divclass="eyebrow1 eyebrow1--left"></div><divclass="eyebrow1 eyebrow1--right"></div><divclass="eyebrow2 eyebrow2--left"></div><divclass="eyebrow2 eyebrow2--right"></div><divclass="eye-glasses eye-glasses-left"></div><divclass="eye-glasses eye-glasses-right"></div><divclass="eye eye--left"><divclass="eyelash eyelash--left"></div><divclass="eyelash eyelash--left1"></div><divclass="eyelash eyelash--left2"></div><divclass="eyelash eyelash--left3"></div><divclass="eyelash eyelash--left4"></div></div><!-- end of left eye --><divclass="eye eye--right"><divclass="eyelash eyelash--right"></div><divclass="eyelash eyelash--right1"></div><divclass="eyelash eyelash--right2"></div><divclass="eyelash eyelash--right3"></div><divclass="eyelash eyelash--right4"></div></div><!-- end of right eye --><divclass="nose"></div><divclass="lips"></div></div><!-- end of face --><divclass="neck"></div><divclass="t-shirt"></div><divclass="neckless"></div></div><!-- end of avatar-container -->
Gray VS grey? Is there a right choice between these two? It is well known that both gray and grey in CSS are considered equivalent with no impact on functionality. We can use either of them without any issues. In the context of web development and CSS, they are both recognized and accepted. CSS specifications and web browsers accommodate both equally.
Why 🤔 do web designers and programmers use both gray and grey in CSS?
Because they wanted to add a little color to the spelling debate!
Below we can see an example of two elements. We set gray for the first element while the second element has grey:
/* Using "gray" (American English) */.first-element {color: gray;}/* Using "grey" (British English) */.second-element {color: grey;}
CSS
Both examples are correct, and your CSS should be functional, .first-element and .second-element classes will share the same color, as CSS treats gray and grey interchangeably.
It turns out that the choice between gray and grey in CSS is primarily a matter of personal preference and doesn’t affect how web browsers interpret your code. You are free to use either.
Similarly, there are other color names with variations in spelling that are recognized by most modern browsers, for example, “lightgray” and “lightgrey” or “darkgray” and “darkgrey” are all valid. 😃
Imagine infusing your web typography (fonts) with the vibrant hues of a dazzling 🌈✨ rainbow! Cascading Style Sheets (CSS) empower designers and developers to bring this captivating vision to life. A colorful font like the CSS rainbow effect is more than just a spectrum of colors; it’s a creative and dynamic way to enhance your website’s visual appeal and make a lasting impression on your visitors.
Today, with this post, 😃 we’ll dive into the exciting world of creating a rainbow effect, unlocking the magic of colors and typography to elevate your web design. Enjoy! 💻
Prepare basic HTML and CSS structure
We begin with our HTML and CSS structure. We create an HTML <div> element that has a class called rainbow-effect. Then, we set some rules in CSS that are applied to our HTML element. So, let’s move forward and analyze our CSS code snippet.
body {background-color: #050c20; /* deep blue */}.rainbow-effect {text-align: center;color: white;font-size: 180px;font-weight: bold;font-family: 'Roboto', sans-serif;}
CSS
First of all, we set the background color of our body to be a deep blue. Then, we proceed with our text. We create a center aligned, white180px text with bold and highly legible fonts, as we specifically seek a font with excellent readability.
Once set, we can then proceed with our tweaks in order to infuse the text with the enchanting hues of a rainbow. The following image shows what is rendered on the screen for the time being. 😃
background-image: linear-gradient The first thing we need to know is that by using the background-image CSS property we are able to create a background with more than one color.
We do so by setting the linear-gradient value, and we are free to choose any color and any direction we want for our text. In our case, we use the to right direction and the gradient starts with the color red on the left and smoothly transitions through orange, yellow, green, blue, indigo, and violet as it moves from left to right. So, it gives a colorful, horizontal stripe-like background.
You are always free to choose any direction of the linear-gradient you like! 👍
background-clip: text We continue our work with the background-clip property which is used to define how the background should be clipped or masked. In our case, it’s set to text, which tells the browser to apply the background gradient only to the text inside our div.
What? Nothing happened yet? Why? Using this property, the colorful background is applied to the text, but the effect is not visible yet because it is necessary to proceed to our next step 🧐 ⬇ in order to achieve the final and desired results. So, let’s move on!
color: transparent Finally, adding the color property to transparent renders the text itself invisible, allowing the colorful background to show through the text. And there it is! 🥳
So, in summary, putting it all together, when you use this code, you’ll have a text with a colorful gradient background (rainbow colors) that appears within the text. The text itself is invisible, creating a striking and colorful text effect. 🎉
Imagine an astronaut floating in space, laptop in hand, surrounded by twinkling ✨ stars. It’s a scene that mirrors the adventure of programming—exploring the unknown, solving 🧩 puzzles, and pushing boundaries. Just as astronauts 👨🚀 👩🚀 embark on missions into space, programmers journey into the digital 💻 frontier.
With the rise of remote work, programmers have the freedom to code from anywhere on 🏖 🏰 🏕 earth. Remote work opens doors to global collaboration, while continuous learning keeps them ahead in a rapidly evolving landscape. So, whether you’re reaching for the stars or diving into code, remember that programming is a journey of discovery and innovation.
Are you considering a career in the world of programming? It’s a wild but also exciting ride, with twists, turns, and plenty of code to go around. But why do people choose this path, you ask? Let me break it down for you, along with some pros and cons to consider. 🤔 In other words, food for thought.
Pros: Why Programming Might Be the Perfect Career for You
Programming is an incredible profession that offers a wide range of opportunities. It allows you to create, innovate, and solve problems in ways that can have a significant impact on the world. Additionally, it offers attractive salaries and the flexibility of remote work. Furthermore, what a great satisfaction it is to bring ideas to life through code.
Plenty of 🎉🎉 Opportunities
To start, programmers have a plethora of job opportunities in a world that provides us with low budget prospects. Skilled coders are in high demand, from big tech companies to small startups. If you’re looking for a career with many options and a really good salary, programming might be your jam.
Believe it or not, coding isn’t just about numbers and logic – it’s an art form, too. Whether you’re crafting a well-designed app or solving a tricky bug, there’s a ton of room for creativity in programming. So, if you’re the type who loves to create and furthermore experiment, you’ll feel right behind your keyboard.
Problem-Solving 🧨 Superpowers
Ever feel like you’re the master of puzzles? If you love cracking enigmas, programming is your playground. Whether you are dealing with messy code or making a slow algorithm faster, programming is all about finding solutions. And trust me, there’s nothing quite like the satisfaction of overcoming a challenge and seeing your code in action.
Forget about getting bored. The field is constantly evolving whether it’s new languages, frameworks, or technologies. It’s like embarking on a never-ending journey of learning. If you thrive on exploration and discovery, programming will definitely keep you engaged.
Remote 🛵 Work
The beauty of remote work! With programming skills in your toolkit, you’re not tied to any particular location. Whether you’re coding from your cozy home office or enjoying a latte at your favorite café, your workspace is everywhere as long as you’ve got an internet connection.
If you are dreaming of hooking 🪝 high-paying opportunities such as freelance projects, contract work, or even full-time positions, improving your English skills can open doors to remote positions in countries offering generous salaries. 🤑 So, now it’s the right time to freshen them up.
Cons: Challenges You Might Face in a Programming Career
Programming comes with its challenges. It demands continuous learning and dedication, which can sometimes be truly stressful. Long hours at the computer can lead to health issues, and the solitary nature of the work can be isolating. Balancing these demands is crucial if you desire to maintain your position in this sector.
Learning Curve 📈 Alert
Programming may be challenging at first. Learning all those languages, algorithms, and frameworks can feel like trying to solve a Rubik’s cube blindfolded. Keep patience and stick with it. Before you know it, you’ll be coding 👩💻 like a pro. So, keep going!
Undoubtedly, the curse of every programmer’s existence – bugs. Those pesky little gremlins that sneak into your code and fill you with exhaustion and devastation. Tracking them down can be a real headache! But hey, don’t give up! Every bug you squash is a victory in your hands, and at the end of the day, it feels soo goood!! 🥇🏆
Maintenance 🤯 Madness
Creating software is only the start. Once it’s out there, you’ve got to keep it running according to plan. That means updating it, fixing security issues, and improving it again and again—all while handling your other tasks. It’s like juggling 🤹♀️ but with computer stuff. It’s not easy, but keeping your code running smoothly is one of the most crucial things to do. Believe me, you can do it, and you will!
Maintaining a healthy work-life balance can be a real challenge in a world where we’re all glued to screens. It’s easy to get sucked into the endless abyss of code. Separate work life from home life it’s crucial. Don’t forget to take breaks, get fresh air, exercise, start a new hobby, travel, go back in time when reading books 📖 was a must, or spend time with loved ones. After all, life’s too short to spend it all behind a screen.
Isolation 😑 Factor
While programming offers the freedom to work remotely and independently, it can also lead to isolation. Spending long hours in front of a computer screen and troubleshooting code solo can sometimes lead to loneliness. Without the colleagues of a traditional office environment, programmers may miss out on all the social interactions and spontaneous collaborations that can spark creativity and association. However, this isolation can be a welcome aspect of the job for people who blossom in solitary environments, allowing them to focus deeply on their work without distractions. Ultimately, whether isolation in programming is seen as good or bad depends on individual preferences and working styles. Some may find comfort in solitude, while others may desire more social interaction.
It’s completely up to you where to place it, on the pros or cons list. In the end, it’s a reflection of your character. ☔ 🌈 🌞
Huh, this awful self-doubt phenomenon. Impostor syndrome or impostorism is common among programmers, where skilled developers feel inadequate and fear being revealed as frauds despite their abilities. This lack of self-confidence can prevent their professional growth by discouraging them from participating in projects, speaking at conferences, or applying for advanced roles. Always remember that you won’t know if you can do it unless you try. So, do not hesitate! Take the shot! 🥁
Last but not least – burnout. Arising from long stress and imbalance between work and personal life. Symptoms include exhaustion and reduced productivity, which can lead to physical health issues and mental health problems like depression. We can prevent this by setting boundaries, organizing workloads, discussing it with our colleagues, asking for support, and taking breaks. Loong ☕ loong 💤 breaks! These techniques will help to maintain health and sustain enthusiasm for coding. Are all part of the journey. So, roll up your sleeves and dive into work. But always remember that burnout is not an option. Get out of your computer when you need a break!!
So, go ahead! Begin this programming journey and picture yourself as our courageous astronaut exploring new boundaries. Equipped with the tools of the trade—a laptop, determination, and a thirst for discovery. Whether you’re dreaming of distant 🌌 galaxies or lines of 📜 code, remember: this path is one of endless possibilities. So, what are you waiting for? Embark on your own adventure. Conquer the skies of coding! Bon voyage! 🪐 ✨
