CSS - Some Properties
<html>
<head>
<title>MT FIRST WEBSITE</title>
<style type="text/css">
/*Pseudo-classes(always starts with ":"")
:first-child & :last-child.
Pseudo-elements(always starts with "::")
::first-line,::first-letter,::selection,::before,::after*/
.moon {
background:linear-gradient(orange 20%,white 40%,orange 50%,green 50%);/*You can use multiple colors by using commas.Percentage values(stop position) is for which area will be covered by the color.Ex(on the basis of the above values)=100% orange (0-20% from top) then 20 -40% it will be transition from orange to white ,at 40% it will be 100% white ,now 40-50% it will be transition from white to orange,then after 50% there will be a sharp line as there stop position are coinciding,after that 100% green. */
}
body p:first-child{ /*this will decorate first child of body element which should be paragraph.you can also use last child,nth child*/
color:blue
}
#fan p:first-child::first-letter{
color:green
}
#fan ::selection{ /*This occurs when you select a text*/
color:red
}
#fan p::after{
content:url("marker.jpg")
}
.trans:hover{
transform:scale(0.5); /*It decrease the box to 0.5 vertically as well as horizontally*/
transform-origin:0% 0%; /*Transform-origin takes value in percent (also top left etc) which are coordinates for axis(here(0,0) origin(top-left)) of rotate or scale*/
position:relative;
}
.transit:hover{
transform:rotate(45deg);
transform-origin:100% 100% /*Here the coordinate is max (for x and y) ,which means bottom-right */
}
.transl{
transform:translate(100px,50px); /*It helps to moves the element.Ex-100px,50px(100px right and 50px down).It also accepts negative value.Note:You can use multiple transforms(scale,rotate,skew,translate) to an element */
}
.trans2{
transform:skew(50deg);
}
.trans3{transition-property:width,transform,height;
width:8cm; /*Always define properties value(width,height) under the class not in the style then only transition work.*/
height:5cm
}
.trans3:hover{
width:10cm;
height:15cm;
transform:rotate(80deg);
}
@keyframes screensaver{
0% {background-image:url("back.jpg")}
50%{background-image:url("back1.jpg")}
100%{background-image:url("back2.jpg")}
}
.screen{
animation-name:screensaver;
width:10cm;
background-size:cover;
background-position:center;
background-repeat:no-repeat;
border:0.5cm dotted orange;
height:5cm;
padding:1cm;
transition:5s;
background-clip:content-box;
animation-duration:10s;/*Takes 10sec to complete the animation*/
margin-top:4cm;
animation-delay:1s;/*starts after 2sec*/
animation-iteration-count:infinite; /*Now animation will not stop ever.It will repeat itself infinite times*/
animation-direction:alternate-reverse; /*It will show the images(animation) in opposite direction.Other values are normal(forward)(default),alternate(forward then backward then forward,alternate reverse (backward then forward then backward)*/
animation-fill-mode:forwards;
animation-timing-function:ease-in-out;
animation-play-state:running;
transform:rotateY(8deg); /*We also using perspec class under center(parent) to have a good effect of rotateY()*/
}
.transform{
transform:rotateX(190deg) rotateY(100deg) rotateZ(190deg) /*It is same as previous transform but it also work in Z-direction.*/
}
.transf{
transform:translate3d(6cm,1cm,5cm); /*similarly you can use rotate3d() in place of rotateX() rotateY()...*/
}
.perspec{
perspective:150px /*always use perspective property in the parent element of the element.Because its the child elemnt that gets the perstpectivenot the wlwment itself.Value it takes is how far the element is placed from the view.lesser the value higher will be the impact */
}
.child:hover{
transform:rotateY(30deg); /*This is just to feel the perspective*/
}
</style>
</head><!-- This is used for comment in html -->
<body><div id="fan"><p>This is just a start</p>
<p>This is <sup>superscripted</sup></p>
<p draggable="true">This is <u>underline</u> and DRAGGABLE text</p>
<p>This is <del>deleted</del> text</p>
<p>This is <em>italic(important)</em> text</p></div>
<progress value="85" max="100" draggable="true">
</progress>
<hr>
<hr/>
<hr/>
<svg width="200" height="200">
<circle cx="100" cy="80" r="2cm" fill="red" stroke="black" stroke-width="10">
</svg>
<svg width="450" height="200">
<circle cx="280" cy="80" r="2cm" fill="red" stroke="black" stroke-width="10"> <!-- cx=pushes the center of the circle further to the right of the screen.cy=pushes the center of the circle further down from the top of the screen -->
</svg>
<br>
<svg width="2000" height="200">
<rect stroke-width="10" width="2cm" x="250" y="10" height="4cm" fill="yellow" stroke="green">
</svg >
<svg width="600" height="100">
<line x1="200" y1="50" x2="380" y2="50" stroke="black" stroke-width="50" stroke-linecap="round">
</svg>
<svg width="1000" height="300">
<polyline points="150 40,300 150,440 40" stroke-linejoin="miter" stroke="black" stroke-width="40" fill="teal" stroke-linecap="round">
</svg>
<div style="margin-left:40"><h1>This is ellipse :</h1></div>
<svg width="500" height="300">
<ellipse cx="200" cy="100" rx="150" ry="70" fill="green" stroke="black" stroke-width="10">
</svg>
<div style="margin-left:40"><h1>This is a triangle(polygon) :</h1>
<svg width="2000" height="300">
<polygon points="100 100,200 200,300 10" fill="green" stroke="black" stroke-width="10"></polygon> <!--polygon element is unique because it automatically closses for you -->
</svg></div>
<div><h1>Moving along X-axis :</h1>
<svg width="1000" height="250">
<rect width="150" height="150" fill="orange">
<animate attributeName="x" from="0" to="200" dur="2s" fill="freeze" repeatCount="5"> <!--attributeName="x"=This means along x-axis.Fill=freeze=this means it will stop after completing task,if you put "remove" value then it will return to its place -->
</svg></div>
<div><h1>Moving along Y-axis :</h1>
<svg width="1000" height="250">
<rect width="150" height="150" fill="orange">
<animate attributeName="y" from="-200" to="300" dur="1.5s" fill="freeze" repeatCount="indefinite">
</svg></div> <br>
<!-- M-moveto
L-lineto
H-horizontal lineto
V-vertical lineto
C-curveto
S-smooth curveto
Q-quadratic Bezier curveto
T-smooth quadratic Bezier curve
A-elliptical Arc
Z-closepath
-->
<div><h1>This is made through path(first moves to (0,0) then line to (200,200) then lines to (200,0) and then Z closes the path/shape):</h1>
<svg width="500" height="250">
<path d="M0,0 L200,200 L200,0 Z" stroke="black"><!--To define a path use the d attribute -->
</svg>
<!--Box-shadow-Take five arguments= x-offset,y-offset,blur(optional),spread(optional),color(optional) -->
<div style="margin-left:20px;box-shadow:10px 10px 10px 10px black;background-color:teal;width:500px;border-radius:1cm;padding:20px;font-size:40px;background:linear-gradient(blue,red)">
<form>
<label>Your Name:</label>
<input type="text" name="Name" placeholder="Enter Your Name" required><br>
<label>Phone Number:</label>
<input type="text" name="Number" placeholder="Enter Your Phone Number" required><br>
<label>Gender:</label>
<input type="radio" name="Gender" value="Male" required>Male
<input type="radio" name="Gender" value="Female" required>Female <br>
<input type="checkbox" name="Agree" required>Agree Terms & Conditions<br>
<br>
<div style="margin-left:200px" ><button type="submit" value="submit" class="submit">Submit</button></div>
</form>
</div><br>
<div style="box-shadow:-10px -10px 0px 20px black;height:300px;width:200px;margin-top:50px;margin-left:40px"></div>
<!--We can use different shadows on the same box by using commas.Use "inset" keyword to make the shadow inside the box-->
<div style="box-shadow:-10px -10px 0px 20px black,20px 20px 10px 30px green;height:300px;width:200px;margin-top:50px;margin-left:40px;margin-bottom:60px"></div>
<div style="box-shadow:inset -10px -10px 0px 20px black;height:300px;width:200px;margin-top:50px;margin-left:40px"></div>
<!--HSL or HSLA(Hue,Saturation,Lightness,Alpha(optional))Hue ranges from 0 to 360degree(0-red,120-green,240-blue).Saturation is a percentage value 100% is full color.Lightness is also a percentage value 0% is dark(black) and 100% is white -->
<div style="background-color:hsla(100,100%,40%,1);height:300px;width:200px;margin-top:50px;margin-left:40px"></div>
<h1 style="margin-left:20px">This is word-wrap(value=normal) :</h1>
<p style="width:100px;height:200px;border:2px solid black;word-wrap:normal"><!--This will directly put words inside the box without breaking -->
Ilovetoplaycricket.
InevermissamatchofcricketspeciallyifitisT20 .
Cricketisverypopularinindia.
Playerslikeviratkohliandrohitsharmaareverypopularinindia.
Theydailysetmilestoneandunbreakablerecordsfortheotherplayers.
</p><br>
<h1 style="margin-left:20px">This is word-wrap(value=break-word :)</h1>
<p style="width:100px;height:200px;border:2px solid black;word-wrap:break-word"> <!--This will break between the words to fit them inside the box -->
Ilovetoplaycricket.
InevermissamatchofcricketspeciallyifitisT20 .
Cricketisverypopularinindia.
Playerslikeviratkohliandrohitsharmaareverypopularinindia.
Theydailysetmilestoneandunbreakablerecordsfortheotherplayers.
</p>
<br><br><br>
<h1 style="position:absolute">Using linear-gradient(through class "moon") :</h1> <!--Using position:absolute will let us to move the below div tag upwards(to remove spaces between h1 and div )-->
<div class="moon" style="border:3px solid black;width:5cm;height:5cm;margin-top:2cm"></div>
<h1 style="position:absolute">Using repeating-linear-gradient :</h1>
<div style="background:repeating-linear-gradient(70deg,red 10px,blue 20px);border:3px solid black;width:5cm;height:5cm;margin-top:2cm"></div>
<h1 style="position:absolute">Using radial-gradient :</h1>
<div style="background:radial-gradient(green,pink,orange);border:3px solid black;width:5cm;height:5cm;margin-top:2cm"></div><!--background:radial-gradient(position(Ex-top,bottom,center,50%),shape or size(Ex=circle,ellipse(default),color-stops(as much color seperated by commas)) -->
<div style="background:radial-gradient(circle,yellow,blue,orange);border:3px solid black;width:5cm;height:5cm;margin-top:2cm"></div>
<div style="border-radius:2.5cm;background:radial-gradient(circle,yellow 10%,blue 30%,orange 80%);border:3px solid black;width:5cm;height:5cm;margin-top:1cm"></div>
<h1 style="position:absolute">Using repeating-radial-gradient :</h1>
<div style="background:repeating-radial-gradient(red 10px,teal 20px);border:3px solid black;width:5cm;height:5cm;margin-top:2cm"></div>
<h1 style="position:absolute">Background-clip property :</h1>
<div style="padding:10px;background-color:red;background-clip:content-box;border:3px solid black;width:5cm;height:5cm;margin-top:2cm"></div>
<div style="background-image:url(back1.jpg);background-clip:padding-box;border:3px solid black;width:5cm;height:5cm;margin-top:2cm"></div> <!--background-clip property has default value="border-box" -->
<h1 style="margin-left:10px;position:absolute">Here u will see transparency :</h1>
<div style="padding:10px;opacity:0.3;background-color:teal;background-clip:content-box;border:3px solid black;width:5cm;height:5cm;margin-top:2cm"></div> <!--To use opacity in "IE"(internet-explorer) the syntax is = filter:alpha(opacity=50).This was for 50% or 0.5 opacity-->
<h1 style="position:absolute;margin-left:10px">Using multiple backgrounds(Dont forget to put background-repeat:no-repeat):</h1>
<div style="background-image:url(back.jpg),url(back2.jpg),url(wall3.jpg);background-position:top left,right bottom,top right;background-repeat:no-repeat;background-clip:padding-box;border:3px solid black;width:35cm;height:25cm;margin-top:2cm"></div>
<h1 style="position:absolute">Use of Background-size property(also used float) :</h1>
<div style="padding:10px;background-image:url(wall3.jpg);background-size:contain;background-repeat:no-repeat;border:3px solid black;width:5cm;height:5cm;margin-top:2cm"></div>
<div style="padding:10px;background-image:url(wall3.jpg);background-size:cover;background-repeat:no-repeat;border:3px solid black;width:5cm;height:5cm;margin-top:-6cm;float:right"></div>
<h1>Use of transform-origin(must use with transform(either rotate or scale) property):</h1>
<h2>It scale at bottom right:</h2>
<div class="trans" style="border: 5px dotted teal;width:8cm;height:5cm;background-image:url(back.jpg);background-repeat:no-repeat;background-size:500px"></div>
<h2>It rotate 45degree at (0,0) or (top-left):</h2>
<div class="transit" style="margin-top:2cm;border: 5px dotted teal;width:8cm;height:5cm;background-image:url(back.jpg);background-repeat:no-repeat;background-size:500px"></div></body></html>
<h1>Translate() method(its without hover):</h1>
<div class="transl" style="margin-top:2cm;border: 5px dotted teal;width:8cm;height:5cm;background-image:url(back.jpg);background-repeat:no-repeat;background-size:500px"></div>
<h1 style="margin-top:4cm">Use of skew() method:</h1>
<div class="trans2" style="margin-top:2cm;border: 5px dotted teal;width:8cm;height:5cm;background-image:url(back.jpg);background-repeat:no-repeat;background-size:500px"></div>
<h1>Using multiple transition property :</h1>
<div class="trans3" style="margin-top:2cm;border: 5px dotted teal;background-image:url(back.jpg);background-repeat:no-repeat;background-size:500px"></div>
<h1>Using animation properties:</h1>
<center class="perspec" ><div class="screen"></div></center>
<h1>Using rotate3d() :</h1>
<div class="transform" style="margin-top:2cm;border: 5px dotted teal;width:8cm;height:5cm;background-image:url(back.jpg);background-repeat:no-repeat;background-size:500px"></div>
<h1 style="margin-top:4cm">Using translate3d() :</h1>
<div class="transf" style="margin-top:2cm;border: 5px dotted teal;width:8cm;height:5cm;background-image:url(back.jpg);background-repeat:no-repeat;background-size:500px"></div>
<h1 style="margin-top:4cm">Using perspective :</h1>
<div class="perspec"><!--This is the parent element -->
<div class="child" style="margin-left:4cm;margin-top:2cm;border: 5px dotted teal;width:8cm;height:5cm;background-image:url(sale.jpg);background-repeat:no-repeat;background-size:500px"></div><!-- This is the child element-->
</div>
<h1>Using functions of filter:</h1>
<h2>Grayscale(takes one parameter in percent):</h2>
<img style="filter:grayscale(100%);border:5px solid black;margin-left:2cm;width:7cm;height:4cm;margin-top:1cm;" src="army.jpg">
<h2>Sepia(takesone parameter in percent)(add redish-brown):</h2>
<img style="filter:sepia(100%);border:5px solid black;margin-left:2cm;width:7cm;height:4cm;margin-top:1cm;" src="army.jpg">
<h2>Drop-shadow(takes distance on x axis,distance on y axis,blu,color as parameter):</h2>
<img style="filter:drop-shadow(200px 10px 10px blue);border:5px solid black;margin-left:2cm;width:7cm;height:4cm;margin-top:1cm;" src="army.jpg">
<h2>Saturate(takes one parameter in percent/number.0%(0)-grayscale 100%(1)-original:</h2>
<img style="filter:saturate(1000%);border:5px solid black;margin-left:2cm;width:7cm;height:4cm;margin-top:1cm;" src="army.jpg">
<h2>Hue-rotate(takes one parameter in degree.It is based on color circle(0deg-red,240deg-blue)).In the example given below degree of every color in the image get increased by 100deg:</h2>
<img style="filter:hue-rotate(100deg);border:5px solid black;margin-left:2cm;width:7cm;height:4cm;margin-top:1cm;" src="army.jpg">
<h2>Invert(takes one parameter in percent/number.It makes dark areas bright and bright areas dark.100% means completely inverted like photographic negative):</h2>
<img style="filter:invert(100%);border:5px solid black;margin-left:2cm;width:7cm;height:4cm;margin-top:1cm;" src="army.jpg">
<h2>Opacity(takes one parameter in percent/number.100% is unchanged):</h2>
<img style="filter:opacity(0.5);border:5px solid black;margin-left:2cm;width:7cm;height:4cm;margin-top:1cm;" src="army.jpg">
<h2>Brightness(takes one parameter in percent/number.100% is unchanged):</h2>
<img style="filter:brightness(0.4);border:5px solid black;margin-left:2cm;width:7cm;height:4cm;margin-top:1cm;" src="army.jpg">
<h2>Contrast(takes one parameter in percent/number.100% is unchanged):</h2>
<img style="filter:contrast(2000%);border:5px solid black;margin-left:2cm;width:7cm;height:4cm;margin-top:1cm;" src="army.jpg">
<h2>Blur(takes one parameter):</h2>
<img style="filter:blur(10px);border:5px solid black;margin-left:2cm;width:7cm;height:4cm;margin-top:1cm;" src="army.jpg">
<h1>Using multiple filter functions:</h2>
<img style="filter:drop-shadow(5px 5px 5px teal) hue-rotate(100deg) contrast(150%) brightness(200%) invert(70%);border:5px solid black;margin-left:2cm;width:7cm;height:4cm;margin-top:1cm;" src="army.jpg">
</body></html>
Comments
Post a Comment