Friday, 7 September 2018
CSS POSITION RELATIVE ABSOLUTE PADDING MARGIN IMAGE REPEAT
------------------------------------------------------------------------------------------------------------
CSS POSITION RELATIVE ABSOLUTE PADDING MARGIN IMAGE REPEAT
READ MORE:
http://fbgadgets.blogspot.com/2017/01/blogger-skin-mask.html
https://vanillaframework.io/docs/examples
-----------------------------------------------------------------------------------------------------------
center=top right;bottom right;top left;top left;bottom left;center bottom;
center right;center left;
https://www.compart.com/en/unicode/search?q=heart#characters
css contents
content: '\2665';
content: '\1F60D';
------------------------------------------------------------------------------------------------------------
<html>
<style>p{color:Red;background:Black url(smiley.gif)center no-repeat;height:100px}</style><p>My first paragraph.</p>
<style>#ID0{color:Red;background:Black
url(https://www.w3schools.com/tags/smiley.gif)center bottom no-repeat;height:70px;width:100px;font-weight:bold;}
</style><button id ="ID0">BUTTON</button>
<style>
p{
color:red;
background:#000 url("smiley.gif") repeat-y 0 0;
-webkit-column-count: 12;//paragraph devide;
//or use:
background-repeat:repeat-y 0 0;
background-image:url(img_flwr.gif),url(smiley.gif);
background-color:black;background-color:rgb(0,0,0);background-color:hsl(0,0%,0%);
background-color:hsla(0,0%,0%);
background-image:url("smiley.gif");
border: 5px solid transparent;border-image: url(border.png) 30 round
border
-webkit-column-count: 12;//paragraph devide;
//or use:
background-repeat:repeat-y 0 0;
background-image:url(img_flwr.gif),url(smiley.gif);
background-color:black;background-color:rgb(0,0,0);background-color:hsl(0,0%,0%);
background-color:hsla(0,0%,0%);
background-image:url("smiley.gif");
border: 5px solid transparent;border-image: url(border.png) 30 round
border
border:5px double yellow;
outline:10px solid red; OR outline-width:10px;outline-color:red;
outline: red solid 10px;//outline-color: red;
//or use:
border-top-color:Red;border-bottom-color:Green;
border-right-color:Yellow;border-left-color:Blue;
border:5px solid yellow;border-style: dotted;border-style: dashed;
border-style: solid;border-style: double;border-style: groove;
border-style: ridge;border-style: inset;border-style: outset;
border-style: none;border-style: hidden;
border-style: dotted dashed solid double;
padding:10px 20px 30px;
text-align:center;
position:relative;
margin:30px;
}
</style>
<body>
<p>This is a paragraph.</p>
</body>
</html>
----------------------------------------------------------------------------------------------------------------
BACKGROUND REPEAT X Y MARGIN RIGHT LEFT----------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------
<html>
<head>
<style>
#ID1{
background-image:url(
background-repeat:
height:416px;
width:32px;
margin-top:100px;
margin-left:500px;
}
#ID2{
background-image:url(
background-repeat:
height:32px;
width:416px;
margin-top:-224px;
margin-left:307px;
}
</style>
</head>
<body>
<div id="ID1"></div>
<div id="ID2"></div>
</body>
</html>
CSS KEY FRAME ANIMATION
------------------------------------------------------------------------------------------------------------------
<html>
<head>
<style>
p{
/*ANIMATION CODE*/
position:relative;
animation:
animation-play-state:running;
animation-direction: alternate;
/*BOX STYLE CODE*/
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
@keyframes
0% {background: red; left: 0px; top: 0px;}
25% {background: yellow; left: 200px; top: 0px;}
50% {background: blue; left: 200px; top: 200px;}
75% {background: green; left: 0px; top: 200px;}
100% {background: red; left: 0px; top: 0px;}
}
</style>
</head>
<body>
<p>BOX</p>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------POSITION ABSOLUTE REALTIVE
--------------------------------------------------------------------------------------------------------------------
<style>
#ID0{
color:Red;
background:Black;
position:absolute;
}
#ID1{
color:Red;
background:Yellow;
position:relative;
}
</style>
<p id="ID0">PARAGRAPH ABSOLUTE</p>
<br>
<br>
<p id="ID1">PARAGRAPH RELATIVE</p>
---------------------------------------------------------------------------------------------------------------------CSS INHERIT TEXT PROPETY
READ MORE
<style> color:Red;
background-color:Black; border-color:red; border-width:5px; outline-color:yellow; outline-style:solid; outline-width:thick; width:100px; height:100px; background-image:url(https://www.w3schools.com/tags/smiley.gif); background-repeat:no-repeat;
background-position:center; } </style> <button id="ID0">BUTTON</button>
https://stackoverflow.com/questions/47423191/using-css-inheritance-when-using-css-selector/47423514#47423514NOTE:
PARENT ELEMENT GIVES COLOR TO CHILD ELEMENT
BUT KEEP IN MIND CHILD DIV TAG UNDER PARENT DIV TAG
h2 {
color: green;
}
.sidebar {
color: red;
}
.sidebar h2 {
color: inherit;
}<h2>Regular H2</h2>
<div class="sidebar">
<h2>Sidebar H2</h2>
</div>
<!-- https://stackoverflow.com/questions/47423191/using-css-inheritance-when-using-css-selector/47423514#47423514
-->
<html>
<head>
<style>
h1{
/*HERE HEADING IS A PARENT ELEMENT*/
/*HEADING COLOR RED*/
color: red;
}
button{
/*HERE BUTTON IS A CHILD ELEMENT*/
/*HERE BUTTON <button> TAG UNDER HEADING TAG <h1> */
/*BUTTON TEXT NO COLOR*/
/*BUTTON TAKES COLOR FROM H1*/
color: inherit;
}
</style>
</head>
<body>
<h1>PARENT GIVES COLOR TO CHILD
<button>CHILD TAKES COLOR FROM PARENT</button>
</h1>
</body>
</html>
-------------------------------------------------------------------------------
CSS INLINE
-------------------------------------------------------------------------------
<textarea rows="4" cols="50" style="color:red;background-image: url(https://www.w3schools.com/tags/smiley.gif);background-repeat:x-repeat;background-color:Almond;">
At w3schools.com you will learn how to make a website.
-------------------------------------------------------------------------------
CSS TEXT ALIGN COLOR DECORATION INDENT SPACING TRANSFORM PROPERTY
----------------------------------------------------------------------------------------------------------------------
<html>
<head>
<style>
#ID0{
color:blue;
}
#ID1{
letter-spacing:20px;
}
#ID2{
word-spacing:20px;
}
#ID3{
text-align:center;
}
#ID4{
text-align:left;
}
#ID5{
text-align:right;
}
#ID6{
direction:rtl;
}
#ID7{
text-decoration:underline;
}
#ID8{
text-decoration:none;
}
#ID9{
text-decoration:overline;
}
#ID10{
text-decoration:line-through;
}
#ID11{
text-indent:50px;
}
#ID12{
text-transform:capitalize;
}
#ID13{
text-transform:lowercase;
}
#ID14{
text-transform: uppercase;
}
</style>
</head>
<body>
<p id="ID0">This is heading 1</p>
<p id="ID1">This is heading 1</p>
<p id="ID2">This is heading 1</p>
<p id="ID3">This is heading 1</p>
<p id="ID4">This is heading 1</p>
<p id="ID5">This is heading 1</p>
<p id="ID6"><bdo dir="rtl">This is heading 1</bdo></p>
<p id="ID7">Add Underline This Text</p>
<p id="ID8">Remove Underline This Text</p>
<p id="ID9">Add Overline This Text</p>
<p id="ID10">Add Line Through This Text</p>
<p id="ID11">Add Indent Left Starting Space This Text</p>
<p id="ID12">each word first letter caitalize this text</p>
<p id="ID13">CSS CODE CHANGE THIS TEXT INTO LOWERCASE</p>
<p id="ID14">css code change this text into uppercase</p>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------------CSS IMAGE POSTION LIKE FACEBOOK PROFILE
TOP LEFT TOP RIGHT
CENTERED
BOTTOM LEFT BOTTOM RIGHT
READ MORE
https://www.w3schools.com/css/css_positioning.asp
NOTE:
PADDING, MARGIN,FONT SIZE, HEIGHT,WIDTH,CAN CHANGE
ELEMENT POSITION
-----------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------
<html>
<!--https:
<head>
<style>
/*PADDING MARGIN ZERO REMOVE SPACE FROM TOP PAGE*/
/*PADDING MARGIN ZERO REMOVE SPACE FROM TOP PAGE*/
*{
padding:0px;
margin:0px;
}
#HEADER{
position:relative;
background:url("https://goo.gl/CbN4Hk")no-repeat;
width:851px;
height:315px;
margin:0 auto; /*MARGIN AUTO HEADER POSTION FOR CENTER*/
}
.bottomleft {
position: absolute;
width: 160px;
height: 160px;
background:url("https://goo.gl/Jnb1Hy")bottom
left no-repeat;
bottom: 8px;
left:
16px;
font-size: 18px;
}
._2xc6 {
bottom: 12px;
left:
201px;
position: absolute;
}
a{
text-decoration:none;
font-weight:bold;
color:White;
}
</style>
</head>
<body>
<div id="HEADER">
<a href= "https://www.w3schools.com/css/css_positioning.asp">
<div class="bottomleft">Bottom Left</div>
</a>
<div class="_2nlj _2xc6">
<h1 class="_2nlv"><span
class="_2t_q"
id="fb-timeline-cover-name"
data-testid="profile_name_in_profile_page">
<a class="_2nlw _2nlv" href="https://www.facebook.com/FaceBook">Face Book</a></span><span class="_2nly"></span>
</h1>
</div>
</div>
</body>
</html>
DIFFERENCE .ClassA.ClassB and .ClassA .ClassB?
READ MORE:
https://stackoverflow.com/questions/1126338/what-does-a-space-mean-in-a-css-selector-i-e-what-is-the-difference-between-c
---------------------------------------------------------------------------------------------------------------
<html>
<title>DIFFERENCE .ClassA.ClassB and .ClassA .ClassB? </title>
<!-- https://stackoverflow.com/questions/1126338/what-does-a-space-mean-in-a-css-selector-i-e-what-is-the-difference-between-c -->
<head>
<style>
.ClassA .ClassB{
border:2px solid;
color:red;
}
.ClassA.ClassB {
border:5px solid;
color:Green;
}
</style>
</head>
<body>
<div class="ClassA">
<p class="ClassB">CLASS B JO KEH UNDER HAI CLASS A KAY IS KA RANG RED HAI</p>
</div>
<p class="ClassA ClassB">asdf</p>
</body>
</html>
------------------------------------------------------------------------------------------------------------------
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment