-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathblog.html
91 lines (85 loc) · 6.63 KB
/
blog.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Luhana D.Blog</title>
<link rel="stylesheet" href="./assets/css/blog.css">
<style> /*this is internal style */
/* ele{
key:value
}*/
</style>
</head>
<body>
<div class="h1">
<a href="index.html">Home</a> |
<a href="contact.html">contact</a> |
<a href="gallery.html">Gallery</a> |
<a href="blog.html">Blog</a> |
<a href="myworks.html">My Works</a>
</div>
<div id=content1>
<section>
<!--1 post-->
<p class="title">The significance of relative sizing</p>
<article>
<p>It is critical for us to take into consideration which relative sizing
technique we use during the styling of our elements for it to function
effectively. Using em means we are making the style relative to its own
element causing cascading through the nested elements. This makes
it more and more complex to give specific sizing as the nesting increases.
Thus it is much preffered using rem which helps u specify size
according to a root element.The only downside is the percentages being
quite difficult to use.
</p>
<p>
Using rems we can build scaleable components.This means creating
an interface which shrinks or grows according to the root font size.This
is really convenient while using
if we had instead used pixel values to style elements when the browser
grows or shrinks in size this values would be fixed in turn not being able to
adjust to the new size of the browser making it appear uneasy to the eyes
and thus unappealing.</p>
</article>
<p class="date">March 20,2020</p>
</section>
<section>
<!--2 post-->
<p class="title">Default browser size and what altering it means</p>
<article>
<p id="the">The default sizing our browser uses for relative sizing is the 16px font-size.
If we set the default to 200px
, we will be setting the relative styling to a new default so that the browser uses that as
a new referrence. While we use percentages the new default it would link
to is the 200px as opposed to the usual 16px.</p>
</article>
<p class="date">March 20,2020</p>
</section>
<section>
<!--2 post-->
<p class="title">The new changes in css3</p>
<article>
<p>1,<span class="word"> Css animations </span>are finally available .This is made so by the transition declaration with
Certain attributes which allow us to make a certain simulation type .We can do it in an easier way using
Slight javascript code which makes it easier or it is even possible without it.
<p>2,<span class="word">the calc() function</span> allows for the taking place of simple arithmetics.We can use it anywhere, length, size, width it isn’t bounded. Another cool feature of this is it allows the mixing of different units ,percentages and pixels for instance which makes it convenient for a lot of purposes.
<p>3,<span class="word">advanced selectors</span>assigning Id’s to elements just to style them is an old way of doing it.Powerful selectors have been introduced which help make the layouts way cleaner.
<p>4,<span class="word">generated content and counter</span>
<p>5,<span class="word">gradients</span> helps create a smooth transition between colors which couldn’t have been done before.They have certain attributes ,radial or linear, which we can specify and make our whole layout appear more beautiful.
<p> 6,<span class="word">webfonts </span>before the number of web fonts was extremely limited. It was hard trying to give your web the look you wanted with such limited options. However, that has all changed and we can easily embed stylish fonts in our files using the code>@font-face rule. This helps you determine the source files for fonts which you can later refer in your font-family.
<p> 7,<span class="word">box sizing</span> The box model is a hectic thing to work with especially as one is just getting started with CSS. It isn’t really intuitive having the padding and border affect the actual size of the element.Thus this new feature allows for the border-box attribute which gives us the exact behaviour of the element which we wish to see.
<p> 8,<span class="word">border image</span> with this feature it is possible to add our own personally designed border to our html.Borders are controlled by a single sprite which is deisplayed repeatitively .
<p> 9,<span class="word">media queries</span> before media queries it used to be that you had to have a various websites regulated to accommodate devices with different sizes. This was frustrating and very time consuming.Now all this is possible by just enclosing the css file in a code>@media rule which is activated when the conditions are met.
<p> 10,<span class="word">multiple backgrounds</span>it wasn’t possible to add multiple backgrounds on the same element.Due to this new future that allows this it is conceivable to achieve interesting effects by stacking different elements in the same element and manipulating their attributes.We do this by using comma to delimit the list of properties for each specific image.
<p> 11,<span class="word">columns </span>this new columns rule allows the splitting of content into different elements. This process used to be unnecessarily complicated and wasted precious development time. Thanks to this feature its made very much simpler to do so now.
<p>12,<span class="word">3D transforms </span>Although it’s use is questionably limited this feature allows powerful features which can help win the hearts of your users. This wasn’t even thought of before,it was hard e4nough manipulating images now to think they’re made moveable is amazing.
</p></p> </p> </p></p></p> </p> </p> </p> </p></p>
</p>
</article>
<p class="date">March 20,2020</p>
</section>
<section>
</div>
</body>
</html>