HTML/CSS3 Code Küche

Seite

— HTML —

Ziemlich simple UL Liste die mit Maximal 2 CSS Klassen auskommt und den Rest über HTML Tags erledigt.

<ul class="playlist"><strong>Example</strong>
  <li>
    <time>00:00:00</time> Example List Element
  </li>
  <li class="link">
    <time>01:01:01</time> 
    <a href="#">Example List Element Link</a>
  </li>
</ul>

— CSS3 —

Die Content:“\fxxx“; setzten Genericons voraus.

.playlist
{
	display:block;
	margin:0px;
	padding:20px;
	font-size:11px;
	list-style:none;
	border:1px solid #aaa;
	padding-top:0px;
}
.playlist:after
{
	content:'';
	clear:both;
	float:none;
}
.playlist strong
{
	font-size:16px;
	font-weight:normal;
	display:block;
	text-align:center;
        border-bottom: 1px solid #aaa;
        margin: 15px 0;
        padding: 5px 0;
        position: relative;
	margin-bottom:25px;
}


.playlist strong:before,
.playlist strong:after
{
        content: '';
        border-right: 20px solid #fff;
        border-top: 15px solid #aaa;
        bottom: -15px;
        position: absolute;
        left: 25px;
}
.playlist strong:after
{
        border-top-color: #fff;
        border-right-color: transparent;
        bottom: -13px;
        left: 26px;
}
.playlist li 
{
	margin: 10px;
	background: rgba(27,157,24,1);
	color: rgba(255, 241, 216, 1);
	text-shadow: 1px 1px 0px rgba(20,20,20,1);
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 5px;
	padding-right: 5px;
}
.playlist li:first-child
{
	margin-top:25px !important;
}
.playlist li:after
{

	float: right;
	content: '\f442';
	font-family: 'Genericons';
	font-size:22px;
	text-align:center;
	line-height:26px;
	color:#fff;
	width: 26px;
	height: 26px;
	border-radius: 50px;
	background: #fff;
	margin-right: -16px;
	margin-top: -2px;
	margin-left: -26px;
	box-shadow: 1px 0px 0px rgba(27,157,24,1);
	transition:all 1s linear;
	text-shadow:none;
}
.playlist li:hover:after
{
	width:52px;
	margin-left:-52px;
	background:#202020;
	color:#202020;
}

.playlist li.link:hover:after
{
	color:#fff;
}
.playlist li.link a
{
	color:rgba(255, 251, 256, 1);
	display: inline-block;
	max-width: 300px;
}
.playlist li time:before
{
	font-size: 16px;
	font-weight: normal;
	float: left;
	content: '\f303';
	font-family: 'Genericons';
	background: #252525;
	border-radius: 50px 0px 0px 50px;
	padding: 5px;
	margin-bottom: -5px;
	margin-top: -5px;
	margin-left: -26px;
	
}
.playlist li time
{
	color: rgba(200,200,200,1);
	font-weight: bold;
	display: inline-block;
	min-width: 65px;
	font-size: 11px;
	background-color: #202020;
	text-align: center;
	line-height: 16px;
	font-family: monospace;
	margin: 1px;
	padding: 2px;	
	border-radius:0px 10px 10px 0px;
}

Schreibe einen Kommentar