Skip to main content

Netflix Logo with CSS

 Netflix Logo With CSS



Hello Folks! today I'am going to share with you a "Netflix" logo design with CSS
code is easy and simple even 10y/o child could try.


 





Let's see our Source Code:


If you know Html and CSS very well then this post is just a piece of cake with you
not and hard and fast coding is applied just span tag i choose and design it accordingly.

Index.html

 <div class="container">
    <span></span>
    <span></span>
    <span></span>
  </div> 

Style.CSS


 body{
background:#26242e;
}
.container{
  position:absolute;
  top:30%;
  left:50%;
  display:flex;
  width:120px;
  height:200px;
  overflow:hidden;
}
span{
  position:absolute;
  width:40px;
  height:200px;
  background:#d81f26
}
span:nth-child(1){
  right:0;
}
span:nth-child(2){
  left:40px;
  z-index:1;
  transform:skew(22deg);
  box-shadow:0 0 15px #000;
} 

Explanation of Code:

.Container:

In ".container" we just center our <div> and adjust its position,height and width.

Span:

In "span" we adjust height & width of letter 'N' to look like Netflix logo and in the end we just add box-shadow to enhance clarity.

Output




I hope you guys like it, if this post was helpful to you so let us know in the comment section.
Labels:

Comments

Post a Comment

Popular posts from this blog

Best Ui Dark Calculator using Html,Css and Javascript

   How to Create a  Calculator  Introduction Calculator is one of the basic projects of JavaScript or any other languages a newbie programmer should probably know how to create it.The best thing of this is that the coding is short and easy to understand . It is a basic project that perform arithmetical operations. All you have to do is to create a button for each number, arithmetic operations. symbols and then add a text-box or input-field. Here is the Output of Dark Calculator : Output: Source Code : Index.html: Here is the html coding :) <!DOCTYPE html> <html  lang =" en "> <head> <meta  charset =" UTF-8 "> <meta  name =" viewport "  content =" width=device-width, initial-scale=1.0 "> <title> Dark Calculator </title> <link  rel =" stylesheet "  href =" styel.css "> </head> <body> <div  class =" main "> <div> <input  id =" result ...
Post a Comment
Read more

GLASS EFFECTS HOVER BUTTONS

GLASS EFFECT HOVER BUTTONS  Hey Folks ✋! Today I'am going to show you how you can build " Beautiful Glass Effect Hover Button " But first of all you must know what is " Hover-Effect ". HOVER: Applies to any element being hovered by the user's pointing device, but not activated. There are three pseudo-classes that allow you to change the appearance of elements when a user is interacting with them. HOVER ACTIVE FOCUS but we focus only hover today and clear our concept 😃😊. WHEN WE APPLIED HOVER ? This is applied when a user hovers over an element with a pointing device such as a mouse.  This has commonly been used to change the appearance of links and buttons when a user  places their cursor over them. It is worth noting that such events do not work on devices that use touch screens (such as the iPad) because the screen is not able to tell when someone is hovering their finger over an element. EXAMPLE OUTPUT SOURCE CODE HTML: <!DOCTYPE   html > <htm...
Post a Comment
Read more

Login & Signup forms using Html & CSS

  Login /Signup Form  Using Html & CSS Hello hope you all are fine :-), today I'm going to make Login and signup form by using html & css it is very easy to create just like a piece of cake! Login Form Index.Html <!DOCTYPE   html > <html   lang = "en" >      <head>      <meta   charset = "UTF-8" >      <meta   name = "viewport"   content = "width=device-width, initial-scale=1.0" >      <title> Join-Us </title>          <link   rel = "stylesheet"   href = "join-us.css" >     </head> <body>    <div   class = "form" >      <h1> Login  <span><hr   style = "  border: 0;       height: 1px;          ...
Post a Comment
Read more