Day 2: 100 days of code
source link: https://dev.to/gauravshekhawat/day-2-100-days-of-code-54m
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Pseudo Elements in CSS
Don't try to put pseudo elements on images, it will not work.
The first point to keep in mind is that the before and the after pseudo-elements come before and after "the content" of the container for which they are defined, not before and after the "container".
In the below example, the content is not empty.
These are mainly used for design elements, so that we don't have to define two extra divs.
Diving deep into the content property of the before and after pseudo elements.
CSS before and after pseudo elements as design elements.
In CSS, ::before creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.
CSS transition property
Sources:-
css-tricks
MDN
Summary:-transition is a short hand for 4 different transition properties, which are (in order) transition-property transition-duration transition-timing-function transition-delay .
-
transition-property:- This defines that on the change of which property should we apply a transition. Some examples are: background-color, font-size, transform etc. We can also specityallas the value of this property, indicating that if any of the property of this element changes, apply the transition.
-
transition-timing-function:- Values can be:- ease, linear, ease-in, ease-out, ease-in-out, step-start, step-end.
steps(4,start) :- This means the transition will have 4 steps, and it will start at the instant you hover on the element.steps(4,end):- Transition will have 4 steps, and it will start after the end of the first time interval(which we calculated by regularly dividing total duration of transition with the number of steps). Don't go into little details in this as it is hardly used.
Multiple animated properites example: -
Few short points that I came to know about
to prevent a text from moving to the next line, you can use
white-space:nowrapfor that text block.The focus pseudo class:- Used for styling an element that is currently targeted by the keyboard(through tabbing), or activated by the mouse.
If you want to center an image inside a div, use:-
img{
display:block;
margin:auto;
as the default value of display for an img element is inline, we must set it to block for margin auto to work for centering.
Remember that the
ulandolhave some margin/padding by default. So, whenever you are making a navigation bar or something, make sure to remove that margin/padding. To see the default styling of various html elements, visit this link[attribute^=value]Example:-a[href^="https"]Selects every element whose href attribute value begins with "https".[attribute$=value]Example: -a[href$=".pdf"]Selects every element whose href attribute value ends with ".pdf"
Recommend
-
10
100 Days of Code ~ Day 3 Well, did take a day off for the holiday, but made sure I was right back at it today! Completed the 3rd and 4th activities from JavaScript30. Activity 3...
-
9
100 days of code Today, we'll go through the Symfony Routing component, which allows to set up routing in PHP applications. We can add this component to the project with this command...
-
2
1. How to center an div element vertically or horizontally. There are many ways to center an div element, few of them are:- Method-1: Using margin:auto (For horizontal centering) In this method, if th...
-
12
Introducing TypeScript It’s been a while since I’ve had the chance to write in this blog and I really wanted to come up with something different for me. If you’re a long time follower of mine, you probably know that I wrote a book o...
-
4
100 days of TypeScript (Day 2) – Confessions of a coderIn 100 days of TypeScript (Day 1), I created a basic TypeScript “application” where two numbers co...
-
6
100daysofcode (2 Part Series) I started today by struggling through a sort-of-mock-interview without reaching an effective solution. Luckily, my mentor saw whe...
-
14
Happy Sunday, everyone! I decided that I will focus on my website primarily for this week. I must create an output that I can deploy and show at the end of the week. I'm giving myself a deadline so that I'm forced to work the best tha...
-
6
Day 4 of 100 Days Of Code Challenge Here can you find what I learned (& published) today. What I published / coded / updated today? Day 4 started with codi...
-
11
25 Day Review This is what I've done in the past 25 days: Technical Documentation Page for fCC RWD Cert I finished this on...
-
5
Great news! I started my first day in a new full-time role as a Full-stack Developer today. Originally, this was supposed to be a part-time position, but much to my surprise, I was told today that I'll be giv...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK