Showing posts with label CSS. Show all posts
Tuesday, January 29, 2019
WHAT I DISCOVERED ABOUT CSS3 TRANSFORM AND THE TRANSFORM-ORIGIN PROPERTY
Hi, welcome to our final lesson on CSS course, in this lesson, I will take you by hand and walk you through all the various things I discovered about CSS3 transform and the transform-origin property. In our next lesson, we’ll gallantly march into JavaScript Tutorial Course. Howbeit, I’m undoubted we are making progress.
As I've stated earlier, today’s lesson anchors on how CSS 3 transforms and transform-origin property works. Therefore, It will be pertinent if we categorically overview each of them.
1. CSS 3 transform
CSS 3 transform enables web designers to scale, rotate, skew or translate an element on a web page. This means that you can change the shape, position, style, and size of an element using CSS 3 transform which supports 2D and 3D transformation.
Open your text editor let us consider some examples.
Firstly, I’d like you to observe how this rectangle below looks without applying CSS 3 transform on it, and secondly, how it looks after applying CSS 3 transform.
a) Without Transform
HTML
<div>Without Transform</div>
CSS
div{
width: 300;
height: 150;
margin-top: 60px;
background-color: blue;
text-align: center;
color: white;
font-size: x-large;
}
REFERENCE THE CSS IN YOUR HTML DOCUMENT, IT WILL LOOK LIKE THIS
SAVE AND OPEN IT IT WILL LOOK LIKE THIS!
b) With Transform
HTML
<div>Transform</div>
CSS
div{
width: 300;
height: 150;
margin-top: 60px;
background-color: blue;
text-align: center;
color: white;
font-size: x-large;
}
REFERENCE IT IN HTML, SAVE AND THEN OPEN IT, IT WILL LOOK LIKE THIS
2. Transform-origin property
Transform-origin property is used to change the axis which the transformed element is positioned. The transform-origin usually have two values; one for x-axis and the other for y-axis. The default value for this property is 50% 50% which is synonymous to the center of the element. 0% 0% corresponds to top left of the element while 100% 100% is the same as the bottom right. You can actually change all these values to explore more. Howbeit, it is pertinent to state here that transform-origin cannot exist on its own without transform property. In other words, the transform-origin property must be used together with CSS 3 transform. Let us see an example to water down the above points.
HTML
<div>
<div class="empty-div">
<div class="blue-div">
</div>
CSS
div.empty-div{
position: relative;
height: 150px;
width: 150px;
margin: 40px;
padding: 15px;
border: 2px dotted black;
}
div.blue-div{
padding: 80px;
position: absolute;
background-color: blue;
border: 2px solid red;
transform: rotate(15deg);
transform-origin: 25% 75%;
}
REFERENCE THE CSS IN HTML DOCUMENT, IT WILL LOOK LIKE THIS
SAVE AND OPEN IT, IT WILL LOOK LIKE THIS
WRAPPING UP
You can change the numbers or values to explore more amazing features in our subject of discourse. This will help you learn more. We will be moving to JavaScript in our next lesson. See you there.
Saturday, January 26, 2019
WHAT YOU SHOULD KNOW ABOUT PSEUDO CLASSES AND PSEUDO ELEMENTS
CSS
,
CSS3
,
ELEMENTS
No comments
:
Hi, in today’s lesson, I will be teaching you how to use pseudo classes and pseudo elements in Cascading Style sheet without making reference to JavaScript or any other scripts. Prior to the release of CSS 3, it was almost, (if not absolutely) impossible to style an element or part of an element in a document without using scripting languages like JavaScript, and so on. Hence, the integration of pseudo classes and pseudo-elements in the latest version of Cascading Style Sheet brought joy unspeakable to most web designers and developers. Therefore, with the knowledge HTML and CSS, you can still do amazing miracles to the making of a fully-fledged website. Let’s briefly discuss the subject of our discourse before heading straight to examples.
1. Pseudo Class
A pseudo-class is a remarkable feature in CSS 3 that enables web designers or developers to add style to a certain element (e.g. text,) in a document independent of scripting languages. A pseudo-class usually begins with a colon (:) in Cascading Style Sheet (CSS). The :first-child pseudo class, and the :last-child pseudo class are the most popularly used pseudo-classes in CSS. However, professional web designers and developers, in addition, make use of .nth child (n) because it accepts integer values. The :first-child pseudo class, and the :last-child pseudo class is very common in CSS. Just as the name implies, there’s an iota of difference between the :first-child pseudo class and the :last-child pseudo class. The former corresponds to an element that is the first child element other elements, while the latter matches the last child of other elements. For proper understanding, let’s hit the brake pedal in other to exemplify the above. Write the following codes in your text editor.
HTML
<div id="parent">
<p> This is your first paragraph</p>
<p> This is your second paragraph</p>
<p> This is your third paragraph</p>
<p> This is your fourth paragraph</p>
<p> This is your fifth paragraph</p>
</div>
CSS
#parent p:first-child{
color: blue;
text-decoration: underline;
font-size: xx-large;
}
#parent p:nth-child(2){
color: red;
text-decoration: line-through;
font-size: x-large;
}
#parent p:nth-child(3){
color: green;
text-decoration: overline;
font-size: larger;
}
#parent p:nth-child(4){
color: purple;
text-decoration: none;
font-size: larger;
}
#parent p:last-child{
color: orange;
text-decoration: blink;
font-size: large;
}
REFERENCE THE CSS IN THE HTML FILE, IT WILL LOOK LIKE THIS
SAVE AND OPEN IT, THE RESULT WILL LOOK LIKE THIS
2. Pseudo Elements
In CSS, pseudo-elements are mainly used for the purpose of selecting a specific part of a text in a document tree. Pseudo-element, unlike pseudo-class, often start with a double colon (::). Generally, there are about five basic pseudo-elements in the cascading style sheet. They include:
a) ::first-line: it is used if one wants to select the first line of text in a paragraph.
b) ::first-letter: it is used to select the first letter of text in a sentence
c) ::before: it inserts some contents before an element.
d) ::after: it inserts some contents before an element.
e) ::selection: It highlights a portion of an element in a paragraph selected by the user. This means that when a visitor of a website tries to select a particular group of words, the color will change to the one defined by a web designer using ''::selection'' element.
Example, write the following codes below;
HTML
<body>
<p> CSS, an acronym for Cascading Style Sheet is a style sheet language written or attached to Hypertext Markup language. The first word Cascading in the acronym refers to a way CSS applies one style on top of another. The last part of the acronym Style Sheet, on the other hand, is used to control the look and feel of a web document. </p>
</body>
CSS
p::selection{
background-color: red;
color: white;
}
REFERENCE THE CSS IN THE HTML DOCUMENT
SAVE AND OPEN IT. THEN TRY SELECTING OR HIGHLIGHTING SOME WORDS
WRAPPING UP
You can try different elements such as the first letter, first line, and so on, to see how they work. Practice is also the soul of self-improvement. So I urge you to keep practicing. Our next lesson lays its weight on transitions.
CREATING BEAUTIFUL CIRCLES AND ELLIPTICAL SHAPES USING CSS
CSS
,
CSS3
,
SHAPES
No comments
:
In this lesson, I will be teaching you how to create
amazing shapes such as circles, ellipsis and so on. We attempted to create some shapes in our
HTML lessons but I don’t think those shapes are beautiful and colorful. With
Cascading Style Sheet, you can do amazing things with shapes, such as adding
texts, inner and outer shadow to shapes and many more amazing things. Let’s get
started.
Open your text editor, and write the following codes
HTML
<div>
<p>circle</p>
</div>
CSS
div{
width: 200px;
height: 200px;
background-color: mediumseagreen;
color: white;
border-radius:
100px;
}
p{
padding-left:
70px;
padding-top:
100px;
font-weight:
bolder;
font-size:
xx-large;
}
REFERENCE THE
CSS IN HTML, it will look like this
SAVE AND
OPEN IT, IT WILL LOOK LIKE THIS
For
Elliptical Shapes
HTML
<div></div>
CSS
div{
width: 200px;
height: 100px;
background-color: darkblue;
border-radius:
50% 50% 50% 50%;
}
REFERENCE
THE CSS IN HTML, IT WILL LOOK LIKE THIS
SAVE AND
OPEN IT, IT WILL LOOK LIKE THIS
WRAPPING UP
Keep on practicing, never give up. Our next lesson
will be awesome.
Thursday, January 24, 2019
HOW TO PERFORM COLOR MIRACLES WITH RADIAL GRADIENT IN CSS
Hi, I humbly welcome you to this lesson. Hope you studied our previous lesson, which happens to be the solid ground with which this lesson is standing on. With you today, I will not limit my discussion on what radial gradient is, but also take you by hand and work you through the various ways on how to perform color miracles with a radial gradient. A radial gradient is like a biological sister to a linear gradient. However, a plethora of differences abounds in the midst of their similarities. This is partly what I mean. Inasmuch as it is a ‘’do or die’’ requirement that at least two colors must be defined for both gradients (linear and radial), radial gradient is however defined from its center. Put it differently, a radial gradient starts from the middle of a circle, unlike the linear gradient.
Another remarkable thing about radial gradient which I will not fail to dish out in this lesson is its syntax or rules in Cascading style sheet (CSS). The syntax used for the radial gradient in CSS is expressed like this:
''Background: radial-gradient (position, shape, color stops)''
If you closely observed the above syntax and compare it with the one that governs linear gradient, you will agree with me that there are a lot of changes between the duos. Let us briefly but closely look at the syntax of a radial gradient for proper understanding.
A CLOSE LOOK AT THE SYNTAX THAT GOVERNS RADIAL-GRADIENT
Background: radial-gradient (position, shape, color stops)
1) POSITION
A position is the first value you have to define in the radial gradient. They are amazing descriptive keywords you can use to define this value. Some of them include top, bottom, left, bottom left, center top, center right and so on. You can equally specify this values using X-axis and Y-axis formula. For example, 50% 50% means that the radial gradient will be set at the center of the circle. And 0% 0% will set the radial gradient at top left. If you know the axis very well, you can manipulate different positions using percentage.
2) SHAPE
Another value you have to consider immediately you have defined the position of the radial gradient is its shape. There are two fundamental shapes in a radial gradient, namely; ellipse and circle. If you intentionally or unintentionally omit the shape value, it will automatically be set as an ellipse. In other words, the ellipse is a default shape in the radial-gradient.
3) COLOR STOPS
Setting a color stop in the radial gradient is similar to that of a linear gradient. You need to specify at least two colours in a radial gradient with the addition of an optional stop position which is usually the length or percentage value. Percentage defines how much an element is to be covered by a particular color. It is pertinent to note here that each percentage must be greater than the last value. For example, (blue 20%, Green 60%, Yellow 85%). In this example, you will discover that the first value (blue) is lesser than the second value (green) and the second value (which is green) is lesser than the last value (yellow). Is it clear? Perfect!
Let us now consider an example to water down all we have learned so far.
HTML
<div></div>
CSS
div{
height: 300px;
width: 350px;
color: white;
background: radial-gradient(circle, green 40%, yellow 60%, red 80%);
box-shadow: 10px 10px 5px 5px #888;
padding: 30px;
}
REFERENCE THE CSS INSIDE YOUR HTML DOCUMENT, IT WILL LOOK LIKE THIS
SAVE AND OPEN IT, IT WILL LOOK LIKE THIS
WRAPPING UP
If by any means you encounter difficulty in coding or referencing the CSS in HTML, you refer back to our previous lessons on HTML or freely drop your comment below, I will be glad to help you. Our next lesson will be exceptional. Keep practising.
Tuesday, January 22, 2019
UNDERSTANDING LINEAR AND RADIAL GRADIENT| AN INFORMATIVE GUIDE
COLORS
,
CSS
,
CSS3
No comments
:
Gradient, as we struggled to give it a perfect definition in our previous lesson, is used to display or render smooth transition between two or more specified colors. In other words, what will enable you to increase the magnitude of a property (in this context, color) or decrease it in cascading style sheet is gradients. They are specifically two main types of gradients we are going to be considering in this lesson. There are Linear and Radial gradients. Each of this gradients works in a very remarkable way. I think it is not inappropriate to consider each of them categorically.
TWO MAJOR TYPE OF GRADIENTS
a) Linear Gradients:
A linear gradient is one of the types of the gradient used in Cascading Style Sheet (CSS) to blend one or more colors to another. In other to create a Linear Gradient, you must at least define two color stops, (cf. our previous lesson). A linear gradient is defaulted to a gradient from top to bottom. For example, if you begin at angle 90%, you can turn the gradient from the top to the bottom, from the left to the right, etc. If my explanations seem complex, don’t panic. You will understand when we consider illustrative examples. Just bear in mind that once you’ve established your gradient, the next thing is to decide on which color to add. When it comes to this, you are the boss. You can decide on any color using rgba or hlsa (I explained these in one of our previous lessons). In our examples, we will be adding four sweet colors. After that, we will carefully determine where these sweet colors will gallantly sit. This is done using percentageLet’s get started.
Open your text editor and key in the following codes
HTML
<div>This is a linear Gradient</div>
CSS
div{
float: left;
width: 350px;
height: 150px;
margin: 5.2px;
color: white;
background: linear-gradient(mediumseagreen, red);
box-shadow: 10px 10px 5px 5px #888;
padding: 30px;
}
REFERENCE THE CSS IN YOUR HTML FILE,
SAVE AND OPEN IT IN YOUR TEXT EDITOR
WRAPPING UP
In our next lesson, we are going to be considering the second type of Gradient and also explain some technical terms inherent in the lessons. Practice makes perfection. I urge you to keep feeding your brain.
Sunday, January 20, 2019
SENSITIVE DETAILS ABOUT CSS COLOR STOPS|IMPORTANT THINGS TO KNOW
COLORS
,
CSS
,
CSS3
No comments
:
Color stops are the colors that you are willing to render smooth transition by setting a starting point and a direction or angle along with gradient effect. Gradient? Don’t worry. We are going to be discussing gradients extensively in our next lesson. So permit me to resist the temptation of digressing. Let’s move on.
Color stops can be very interesting and as well interactive if you know how to use it correctly. It will be an unnecessary repetition if I tell you at this level of our tutorial that Cascading Style sheet (CSS) pegs its fulcrum on color, beauty, and styling of a web page. Nevertheless, hear it again. CSS is no doubt, the goddess of beauty to any website. If CSS stops swinging, then the website becomes stinking ugly.
I’ve crafted this lesson to serve as an eye-opener to you on how to apply multiple color stops and/or sharp colors to a web page, by separating the color name or value with a comma (,). One important thing that you have to bear in mind while using color stops is its position using linear gradients.
For example, write the following codes in your text editor, I will explain later.
1. FOR MULTIPLE COLOR
HTML
<div>Example of Multiple Colors</div>
CSS
div{
float: left;
width: 350px;
height: 150px;
margin: 5.2px;
color: white;
background: linear-gradient(blue, yellow, pink, white);
}
REFERENCE THE CSS IN HTML DOCUMENT, IT WILL LOOK LIKE THIS
SAVE AND OPEN IT WILL LOOK LIKE THIS
2. FOR SHARP COLORS
HTML
<div id="sharp">Example of Sharp Colors</div>
CSS
#sharp{
float: left;
width: 350px;
height: 150px;
margin: 5.2px;
color: white;
background: linear-gradient(blue 20%, yellow 20%, yellow 40%, green 40%, green 80%, red 80%, red 100%);
}
REFERENCE THE CSS IN HTML DOCUMENT, IT WILL LOOK LIKE THIS
SAVE AND OPEN IT, IT WILL LOOK LIKE THIS
NOTE:
For the direction of the gradient floating, you are free to set it to be right, bottom, top or left as we used it in our examples. For questions, make use of the comment box below. We will be focusing on gradients in our next lesson.
Subscribe to:
Posts
(
Atom
)
