Category: CSS

Categories
CSS

Mega menu

* { margin: 0; padding: 0; box-sizing: border-box; }
.nav-bar {
	width: 100%; background: #444; height: 100px; position: relative;
}

.nav-bar .nav-bar-menu-btn {
	width: 100px; height: 100px; background: blue;
	float: right; text-align: center;
	color: #fff;
	cursor: pointer; transition: all 0.4s ease;
}
.nav-bar .nav-bar-menu-btn:hover { color: red; }
.nav-bar .nav-bar-menu-btn:hover .mega-menu { color: #fff; }
.nav-bar .nav-bar-menu-btn .mega-menu li:hover { color: red; }
.header-banner { background: #18bc9c; width: 100%; height: 2350px; }

.mega-menu { 
	position: absolute; top: 0; right: 0;
	width: 100%; height: auto; background: #2c3e50;
	transition: all 0.4s ease;
	padding: 40px;
	visibility: hidden; opacity: 0;
}
.inner-mega-menu { width: 24%; float: left; list-style: none; }
.inner-mega-menu li { padding: 10px 0; text-align: left; transition: all 0.4s ease; }
.nav-bar .nav-bar-menu-btn:hover .mega-menu { 
	visibility: visible; opacity: 1; 
}

<div class="container" style="position: fixed; width: 100%;">
	<nav class="nav-bar">
		  <div class="nav-bar-menu-btn">Menu
		  	<div class="mega-menu">
		  		<ul class="inner-mega-menu">
		  			<li>Bibendum</li>
		  			<li>Mattis Ridiculus</li>
		  			<li>Ligula</li>
		  			<li>Purus Sem</li>
		  		</ul>
		  		<ul class="inner-mega-menu">
		  			<li>Bibendum</li>
		  			<li>Mattis Ridiculus</li>
		  			<li>Ligula</li>
		  			<li>Purus Sem</li>
		  		</ul>
		  		<ul class="inner-mega-menu">
		  			<li>Bibendum</li>
		  			<li>Mattis Ridiculus</li>
		  			<li>Ligula</li>
		  			<li>Purus Sem</li>
		  		</ul>
		  		<ul class="inner-mega-menu">
		  			<li>Bibendum</li>
		  			<li>Mattis Ridiculus</li>
		  			<li>Ligula</li>
		  			<li>Purus Sem</li>
		  		</ul>
		  	</div>
		</div>
	</nav>
</div>
Categories
CSS

Add line breaks on psuedo content text

p:after {
    content: "Ligula /A Justo /A Ridiculus
    white-space: pre-wrap;
}

Result:
Ligula
Justo
Ridiculus

Categories
CSS

Creating full width container inside fixed width container

.row-full {
    width: 100vw;
    position: relative;
    margin-left: -50vw;
    left: 50%;
}
Categories
CSS

Object-fit

.container {
    width: 500px;
    height: 250px;
}
.container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

<div class="container">
    <img src="xxxxx.jpg" data-object-fit="cover">
</div>

<script src="js/objectFitPolyfill.min.js"></script>

Resource:
https://github.com/constancecchen/object-fit-polyfill

Categories
CSS HTML

iframe Responsive Fluid Width (Youtube, Google Map, etc,)

.iframe-wrap {
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
    height: 0;
}
.iframe-wrap iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
}

<div class="iframe-wrap">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/pEIu-WG-D-s" frameborder="0" allowfullscreen=""></iframe>
</div>
Categories
CSS HTML

How to hide placeholder with CSS

::-webkit-input-placeholder {
   opacity: 0;
}
:-moz-placeholder { /* Firefox 18- */
   opacity: 0;  
}
::-moz-placeholder {  /* Firefox 19+ */
   opacity: 0;  
}
:-ms-input-placeholder {  
   opacity: 0;
}

Reference: http://frontendbabel.info/articles/styling-placeholder-using-css/

Categories
CSS HTML

CSS – Add commas to each span except the last one

<div class="wrap">
    <span>AAAA</span>
    <span>BBBB</span>
    <span>CCCC</span>
    <span>DDDD</span>
</div>
.wrap > span:not(:last-child):after {
	content: ", ";
}

Result
AAAA, BBBB, CCCC, DDDD

Categories
CSS

CSS Defaults

.reset-this {
animation : none;
animation-delay : 0;
animation-direction : normal;
animation-duration : 0;
animation-fill-mode : none;
animation-iteration-count : 1;
animation-name : none;
animation-play-state : running;
animation-timing-function : ease;
backface-visibility : visible;
background : 0;
background-attachment : scroll;
background-clip : border-box;
background-color : transparent;
background-image : none;
background-origin : padding-box;
background-position : 0 0;
background-position-x : 0;
background-position-y : 0;
background-repeat : repeat;
background-size : auto auto;
border : 0;
border-style : none;
border-width : medium;
border-color : inherit;
border-bottom : 0;
border-bottom-color : inherit;
border-bottom-left-radius : 0;
border-bottom-right-radius : 0;
border-bottom-style : none;
border-bottom-width : medium;
border-collapse : separate;
border-image : none;
border-left : 0;
border-left-color : inherit;
border-left-style : none;
border-left-width : medium;
border-radius : 0;
border-right : 0;
border-right-color : inherit;
border-right-style : none;
border-right-width : medium;
border-spacing : 0;
border-top : 0;
border-top-color : inherit;
border-top-left-radius : 0;
border-top-right-radius : 0;
border-top-style : none;
border-top-width : medium;
bottom : auto;
box-shadow : none;
box-sizing : content-box;
caption-side : top;
clear : none;
clip : auto;
color : inherit;
columns : auto;
column-count : auto;
column-fill : balance;
column-gap : normal;
column-rule : medium none currentColor;
column-rule-color : currentColor;
column-rule-style : none;
column-rule-width : none;
column-span : 1;
column-width : auto;
content : normal;
counter-increment : none;
counter-reset : none;
cursor : auto;
direction : ltr;
display : inline;
empty-cells : show;
float : none;
font : normal;
font-family : inherit;
font-size : medium;
font-style : normal;
font-variant : normal;
font-weight : normal;
height : auto;
hyphens : none;
left : auto;
letter-spacing : normal;
line-height : normal;
list-style : none;
list-style-image : none;
list-style-position : outside;
list-style-type : disc;
margin : 0;
margin-bottom : 0;
margin-left : 0;
margin-right : 0;
margin-top : 0;
max-height : none;
max-width : none;
min-height : 0;
min-width : 0;
opacity : 1;
orphans : 0;
outline : 0;
outline-color : invert;
outline-style : none;
outline-width : medium;
overflow : visible;
overflow-x : visible;
overflow-y : visible;
padding : 0;
padding-bottom : 0;
padding-left : 0;
padding-right : 0;
padding-top : 0;
page-break-after : auto;
page-break-before : auto;
page-break-inside : auto;
perspective : none;
perspective-origin : 50% 50%;
position : static;
/* May need to alter quotes for different locales (e.g fr) */
quotes : ‘\201C’ ‘\201D’ ‘\2018’ ‘\2019’;
right : auto;
tab-size : 8;
table-layout : auto;
text-align : inherit;
text-align-last : auto;
text-decoration : none;
text-decoration-color : inherit;
text-decoration-line : none;
text-decoration-style : solid;
text-indent : 0;
text-shadow : none;
text-transform : none;
top : auto;
transform : none;
transform-style : flat;
transition : none;
transition-delay : 0s;
transition-duration : 0s;
transition-property : none;
transition-timing-function : ease;
unicode-bidi : normal;
vertical-align : baseline;
visibility : visible;
white-space : normal;
widows : 0;
width : auto;
word-spacing : normal;
z-index : auto;
}

Categories
CSS

Responsively change div size keeping width-height ratio

.wrapper {
  width: 50%;
  /* whatever width you want */
  display: inline-block;
  position: relative;
}
.wrapper:after {
  padding-top: 56.25%;
  /* 16:9 ratio */
  display: block;
  content: '';
}
.main {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

<div class="wrapper">
  <div class="main">
    This is your div with the specified aspect ratio.
  </div>
</div>