CSS Advanced #1

 CSS

  • CSS Rounded Corners

With the CSS border-radius property, you can give any element "rounded corners".

Example : 

#rcorners1 {
  border-radius: 25px;
  background: #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

Four values - border-radius: 15px 50px 30px 5px; 

(first value applies to top-left corner, second value applies to top-right corner, third value applies to bottom-right corner, and fourth value applies to bottom-left corner)


  • CSS Overflow

The overflow property specifies whether to clip the content or to add scrollbars when the content of an element is too big to fit in the specified area.

The overflow property has the following values:

  • visible - Default. The overflow is not clipped. The content renders outside the element's box
  • hidden - The overflow is clipped, and the rest of the content will be invisible
  • scroll - The overflow is clipped, and a scrollbar is added to see the rest of the content
  • auto - Similar to scroll, but it adds scrollbars only when necessary

Example : 

div {
  width: 200px;
  height: 50px;
  background-color: #eee;
  overflow: visible;
  overflow: hidden;
  overflow: scroll;
  overflow: auto;
}


  • CSS Navigation Bar
Having easy-to-use navigation is important for any web site.

Example :

Simple Na-bar with links:
<ul>
  <li><a href="default.asp">Home</a></li>
  <li><a href="news.asp">News</a></li>
  <li><a href="contact.asp">Contact</a></li>
  <li><a href="about.asp">About</a></li>
</ul>

Removing the bullets from the Nav-Bar:
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

Vertical Navigation-Bar:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 60px;
}

li a {
  display: block;
}

Horizontal Navigation-Bar:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

Fixed Navigation-Bar:

Fixed top Nav-Bar:

ul {
  position: fixed;
  top: 0;
  width: 100%;
}

Fixed Bottom Nav-Bar:

ul {
  position: fixed;
  bottom: 0;
  width: 100%;
}

CSS icons
The simplest way to add an icon to your HTML page, is with an icon library, such as Font Awesome.
Add the name of the specified icon class to any inline HTML element (like <i> or <span>).

Use font-awsome Icons:

<script src="https://kit.fontawesome.com/yourcode.js"></script>

Example:

<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>


Use google icons:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

Example:

<i class="material-icons">cloud</i>
<i class="material-icons">favourite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>


CSS Links:

The four links states are:

  • a:link - a normal, un-visited link
  • a:visited - a link the user has visited
  • a:hover - a link when the user mouses over it
  • a:active - a link the moment it is clicked

CSS Shadows:

With CSS you can add shadow to text and to elements.

In these chapters you will learn about the following properties:

  • text-shadow
  • box-shadow
Example :

h1 {
  text-shadow: 2px 2px;
}

h1 {
  text-shadow: 2px 2px 5px red;
}// adding a blur effect to the shadows

Multiple Shadows :

Example :

h1 {
  text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

Box Shadows:

Example :

div {
  box-shadow: 10px 10px;
  box-shadow: 10px 10px grey;
  box-shadow: 10px 10px 5px grey;
}


CSS 3D Transform:

CSS also supports 3D transformations.

With the CSS transform property you can use the following 3D transformation methods:

  • rotateX()
  • rotateY()
  • rotateZ()
Example :

#myDiv {
  transform: rotateX(150deg);
  transform: rotateY(130deg);
  transform: rotateZ(90deg);
}

Responsive Sidebar:

<div class="sidebar">
  <a class="active" href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
</div>

Add CSS to it:

.sidebar {
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
  position: fixed;
  height: 100%;
  overflow: auto;
}

.sidebar a {
  display: block;
  color: black;
  padding: 16px;
  text-decoration: none;
}

.sidebar a.active {
  background-color: #4CAF50;
  color: white;
}

Apply Media Queries:

@media screen and (max-width: 700px) {
  .sidebar {
    width: 100%;
    height: auto;
    position: relative;
  }
  .sidebar a {float: left;}
  div.content {margin-left: 0;}
}










Comments

Post a Comment

Popular posts from this blog

Java Basics #4

  Java  Math The Java Math class has many methods that allows you to perform mathematical tasks on numbers. Math.max( x,y ) The  Math.max( x , y )  method can be used to find the highest value of  x  and  y. Example: Math.max(5, 10); Math.min( x,y ) The  Math.min( x , y )  method can be used to find the lowest value of  x  and  y. Example: Math.min(5, 10); Math.sqrt( x ) The  Math.sqrt( x )  method returns the square root of  x. Example: Math.sqrt(64); Math.abs( x ) The  Math.abs( x )  method returns the absolute (positive) value of  x. Example: Math.abs(-4.7); Random Numbers Math.random()  returns a random number between 0.0 (inclusive), and 1.0 (exclusive). Example: Math.random(); To get more control over the random number, e.g. you only want a random number between 0 and 100, you can use the following formula. Example: int randomNum = (int)(Math.random() * 101);  // 0 to 100 More Math ...
Read more

BootStrap Advanced #3

Bootstrap Carousel: Example: < div id = "carouselExampleSlidesOnly" class = "carousel slide" data-bs-ride = "carousel" > < div class = "carousel-inner" > < div class = "carousel-item active" > < img src = "..." class = "d-block w-100" alt = "..." > </ div > < div class = "carousel-item" > < img src = "..." class = "d-block w-100" alt = "..." > </ div > < div class = "carousel-item" > < img src = "..." class = "d-block w-100" alt = "..." > </ div > </ div > </ div > The  .active  class needs to be added to one of the slides  otherwise the carousel will not be visible. Also be sure to set a unique id on the  .carousel  for optional controls, especially if you’re using multiple caro...
Read more

CSS Advanced #2

  CSS  The object-fit Property: The CSS   object-fit   property is used to specify how an <img> or <video> should be resized to fit its container. Example :  img  {   width :  200px ;   height :  400px ;   object-fit :  cover ; } All Values of The CSS object-fit Property The  object-fit  property can have the following values: fill  - This is default. The replaced content is sized to fill the element's content box. If necessary, the object will be stretched or squished to fit contain  - The replaced content is scaled to maintain its aspect ratio while fitting within the element's content box cover  - The replaced content is sized to maintain its aspect ratio while filling the element's entire content box. The object will be clipped to fit none  - The replaced content is not resized scale-down  - The content is sized as if none or contain were specified (would result in a smaller co...
Read more