Tiger Bird Webdesign: CSS Flex: Making A Sunblock

Tuesday, 25 November 2014

CSS Flex: Making A Sunblock

Here I have designed a window sun block.

The CSS display:flex property makes it super easy to create same sized HTML div elements with different colors.

HTML

The "box" div element contains several div elements describing the color of each element with style="background-color:color".

CSS

The size of the div elements is defined by flex:1. The prefix -webkit- and -ms- is necessary if you want to display it in Safari and Internet Explorer. Don't forget to write display:flex for the "box" div element.

CSS&HTML Code


<!Doctypte html>
<html>

<body>

<style>
#box
{width:500px;
height:200px;
display:-webkit-flex;
display:flex;
}

#box .white {
-webkit-flex:1;
-ms-flex:1;
flex:1;
}

#box .red {
-webkit-flex:1;
-ms-flex:1;
flex:1;
}

.red
{-webkit-border-bottom-right-radius:50px;
-moz-border-bottom-right-radius:50px;
border-bottom-right-radius:50px;
-webkit-border-bottom-left-radius:50px;
-moz-border-bottom-left-radius:50px;
border-bottom-left-radius:50px;
border-style:solid;
border-width:1px;
border-color:brown;
}

.white
{-webkit-border-bottom-right-radius:50px;
-moz-border-bottom-right-radius:50px;
border-bottom-right-radius:50px;
-webkit-border-bottom-left-radius:50px;
-moz-border-bottom-left-radius:50px;
border-bottom-left-radius:50px;
border-style:solid;
border-width:1px;
border-color:brown;
}

</style>
</head>

<body>

<div id="box">

<div  class="red" style="background-color:red;"></div>
<div  class="white" style="background-color:white;"></div>
<div class="red" style="background-color:red;"></div>
<div class="white" style="background-color:white;"></div>
<div class="red" style="background-color:red;"></div>
<div  class="white" style="background-color:white;"></div>
<div  class="red" style="background-color:red;"></div>
<div  class="white" style="background-color:white;"></div>
<div  class="red" style="background-color:red;"></div>
<div  class="white" style="background-color:white;"></div>
<div  class="red" style="background-color:red;"></div>
<div  class="white" style="background-color:white;"></div>
<div  class="red" style="background-color:red;"></div>
<div  class="white" style="background-color:white;"></div>
<div  class="red" style="background-color:red;"></div>
<div  class="white" style="background-color:white;"></div>
<div  class="red" style="background-color:red;"></div>
<div  class="white" style="background-color:white;"></div>
<div  class="red" style="background-color:red;"></div>
<div  class="white" style="background-color:white;"></div>
<div class="red" style="background-color:red;"></div>
<div  class="white" style="background-color:white;"></div>
</div>

</div>

</body>

</html>

Tiger Bird Webdesign

Tuesday, 25 November 2014

CSS Flex: Making A Sunblock

HTML

CSS

CSS&HTML Code

No comments:

Post a Comment