CSS notes : General

PHOTO EMBED

Tue Jan 19 2021 12:27:29 GMT+0000 (Coordinated Universal Time)

Saved by @jpannu #css 

                      /* --------------------------- */
// New Css tags.
.items { vertical-align : middle;  }
.selector {
  min-width : 100px;
  max-width : 200px;
 }
                      /* --------------------------- */

@media screen (max-width : 60rem) and (orientation : portrait){ 
 ... 
}
// To Specify devices with "Portrait" Orientation. Like "Ipads/Tablets".
                      /* --------------------------- */


//Spacing of the element.
element {
 position : fixed;
  width : 50%;
} 
 /*  If the element's 'position' is 'fixed'.
 Then % styled  apllied on the element works in respect to the VH or VW.
 */
                      /* --------------------------- */
//Font.
form > input[type='text'] {
 font : inherit; 
}
/* If we don't Inherit the properties, Then it use browser's style.
We want to use style(font size/family )as the rest of the web pages */
                      /* --------------------------- */

//Disbled buttons.
.btn.disabled {
 cursor : no-pointer;
  background : red;
}
/* This way we can desing UI, like a disabled Input.  
Were it does not allow to type in anything.
*/
                      /* --------------------------- */

// Meta Tag.
<meta name='viewport' content='width=device-width, initial-scale=1.0, 
 maximum-scale=2.0,minimum-scale=1.2'>
//Meta Information In the Head Tag.
//Some of them are optional.
                      /* --------------------------- */
//To hover and show some content.
  .elem p {
  color : transparent   ;
  }
.elem:hover p {
 color : green;
 }
                      /* --------------------------- */

  //To change kind of opacity.
div.box {
 filter : brightness(0);
 }  
div.box:hover {
 filter : brightness(100%);
 }  
    
                      /* --------------------------- */
  .btn { 
   transition-property: color , background-color;
   transition: .2s ease;
   }
                      /* --------------------------- */
.elem {
	width : fit-content;
 }
                      /* --------------------------- */
  .img {
  	object-fit: cover; 
  }

                      /* --------------------------- */
#footer .social-item img {
	filter: grayscale(1);
}// Will Make it black and white.
#footer .social-item img:hover {
	filter: grayscale(0);
}//Hovering will show original color of the img.

                      /* --------------------------- */
 /* To get Text on the hovered a Tag  */
//HTML
<li><a data-after-abc="Home" href="#">Home</a></li>
<li><a data-after-abc="Services" href="#">Services</a></li>
<li><a data-after-abc="Projects" href="#">Projects</a></li>
  //CSS
#header  ul a::after {
	content: attr(data-after-abc);
	position: absolute;
	font-size: 15rem;
	top: 50%;
	left: 50%;
	z-index: -1;
	color : rgba(128, 128, 128, 0.253);
	transform: translate(-50%, -50%) scale(0);
}

#header  ul li:hover a::after {
	cursor: pointer;
	transform: translate(-50%, -50%) scale(1);
}

                      /* --------------------------- */
/* Hamburger Animation */
.bar {
	height : 3px;
	width : 25px;
	background : black;
	position: relative;
}
.bar::before, 
 .bar::after {
	 content : '';
	 position: absolute;
	 left : 0 ;
	 height : inherit;
	 width : 25px;
	 background : black;
	 transition: .3s ease-in-out transform;
}
.bar::before {
	top : -8px;
}
.bar::after {
	bottom : -8px;
}
//Animate 01
.hamburger.close .bar::before {
	top: 0;
}
.hamburger.close .bar::after {
  bottom : 0;
}


//Hamburger is parent
 //Animate 02

.hamburger.close .bar {
	background : transparent;
}
.hamburger.close .bar::before {
	top:0;
	transform : rotate(45deg);
}
.hamburger.close .bar::after {
	transform : rotate(-45deg);
	top : 0;
}
// And will need to Toggle class 'close' via Js.

                      /* --------------------------- */
//Menu is alway Flahing ( white Round on the borders ).
.hamburger {
	position: relative;
	height: 60px;
	width: 60px;
	display: inline-block;
	border: 3px solid white;
	z-index: 1000;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	transform: scale(0.8);
	margin : 15px;
}

.hamburger::before {
	content: '';
	position: absolute;
	border: 3px solid white;
	height: inherit;
	width: inherit;
	border-radius: 50%;
	animation: hamburger_puls 2s infinite;
}
@keyframes hamburger_puls  {
  0% {
	opacity: 1;
	transform: scale(1);
  }
  100% {
   opacity: 0;
   transform: scale(1.3);
  }
}

                      /* --------------------------- */

.select {
  user-select : none;
  //User can not select any thing for this selector.
}
                      /* --------------------------- */

//Pseudo.
.selector >  li:last-child { 
                    // Will select "Last" li for the "selector" Element.
                    }          
             
/* Width and Height properties will not work with the inline properties,
 In order to make width/height changes, We need to add "inline-block"
 or "block" properties to the 
 provided Element. */

// Project Hotel Website,

//Focus.
#selector:focus {  outline : none; }
//It will Remove the 'outline' from the required selector.


//Linking Specific "Devices" For Responsive design.
<link rel='stylesheet' media='screen and (max-width: 768px )' href='name.css'>
  //This Css will only load when the Screen size is less than '768px'.

  /* --------------------------- */
  //SNAP: It will automatically adjust the 'section' with View Port. We use this when we w         ant the user to see the Full view port of 1 section.  
  
  container{
    scroll-snap-type: y mandatory;
  }
  section {
    scroll-snap-align: center;  
  }

                      /* --------------------------- */
content_copyCOPY