Skip to content

Instantly share code, notes, and snippets.

View rafszul's full-sized avatar

rafal szulczewski rafszul

41 followers · 201 following
View GitHub Profile
@rafszul
rafszul / index.html
Created February 16, 2017 01:48
Vertically and horizontally aligned
<div class="table-cell">
<h1 class="element">Table Cell</h1>
</div>
<div class="flex">
<h1>Flex</h1>
</div>
@rafszul
rafszul / index.html
Created February 16, 2017 01:48
yboeE
<!-- We will make a simple accordian with hover effects
The markup will have a list with images and the titles-->
<div class="accordian">
<ul>
<li>
<div class="image_title">
<a href="#">KungFu Panda</a>
</div>
<a href="#">
<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg"/>
@rafszul
rafszul / flex-justified-image-grid.markdown
Created February 16, 2017 01:46
Flex Justified Image Grid

Flex Justified Image Grid

Justified image grids are well known from sites like Google+ and Flickr. Typical implementations normally rely heavily on Javascript and can be quite taxing. This version of this Layout relies completely on the module.

A Pen by Michael Gehrmann on CodePen.

License.

@rafszul
rafszul / css3-svg-loader-animation.markdown
Created February 16, 2017 01:41
CSS3 + SVG loader animation
@rafszul
rafszul / index.html
Created February 16, 2017 01:40
V-day plane SVG animation
<!-- <h1>SVG with CSS animations </h1> -->
<div class="scene">
<span class="chem-trail">
<svg class="heart" viewBox="0 0 32 29.6">
<path d="M23.6,0c-3.4,0-6.3,2.7-7.6,5.6C14.7,2.7,11.8,0,8.4,0C3.8,0,0,3.8,0,8.4c0,9.4,9.5,11.9,16,21.2
c6.1-9.3,16-12.1,16-21.2C32,3.8,28.2,0,23.6,0z"/>
</svg>
</span>
<span class="cloud cloud--small">
<svg class="heart" viewBox="0 0 32 29.6">
@rafszul
rafszul / index.pug
Created February 16, 2017 00:06
pure CSS self-typing text
.message
@rafszul
rafszul / index.html
Created February 16, 2017 00:02
Responsive OOCSS Grid System
<div class="grid-wrap">
<div class="row">
<div class="col g-1of1 g4-1of5">
<div class="in">
<div class="row is-nested">
<div class="col g2-1of1 g3-1of3 g4-1of1">
<div class="in">
<div class="module">
<h1 class="h3">One Third</h1>
@rafszul
rafszul / grid-layout-spans.markdown
Created February 15, 2017 23:56
Grid Layout Spans
@rafszul
rafszul / pattern (1).svg
Created February 15, 2017 18:36
<svg xmlns="http://www.w3.org/2000/svg" width="1920" height="1080"><path d="M629,1244L303,1258L793,1256Z" fill="#9f5771" stroke="#9f5771" stroke-width="1.51"/><path d="M307,-141L570,-147L828,-161Z" fill="#e1cae2" stroke="#e1cae2" stroke-width="1.51"/><path d="M41,-141L307,-141L828,-161Z" fill="#e4d5e8" stroke="#e4d5e8" stroke-width="1.51"/><path d="M828,-161L1224,-151L1387,-169Z" fill="#f3a1c6" stroke="#f3a1c6" stroke-width="1.51"/><path d="M828,-161L1387,-169L1743,-176Z" fill="#f399b7" stroke="#f399b7" stroke-width="1.51"/><path d="M1387,-169L1627,-158L1743,-176Z" fill="#e590a1" stroke="#e590a1" stroke-width="1.51"/><path d="M1606,1193L1458,1214L1837,1216Z" fill="#96043b" stroke="#96043b" stroke-width="1.51"/><path d="M1743,-176L1870,-117L1949,-121Z" fill="#c88494" stroke="#c88494" stroke-width="1.51"/><path d="M1837,1216L1458,1214L1976,1241Z" fill="#890136" stroke="#890136" stroke-width="1.51"/><path d="M1458,1214L1078,1255L1976,1241Z" fill="#9d073d" stroke="#9d073d" stroke-width="1.51"/><path d="M1970,1155
@rafszul
rafszul / content
Created February 14, 2017 14:38
<md-card fxLayout="row" fxLayout.xs="column" fxLayout.sm="column" fxLayoutWrap>
<md-card *ngFor="let item of items | async" fxFlex="50">
<md-card-header>
<md-card-title>
<h5>{{ item.name }}</h5>
</md-card-title>
<img md-card-avatar src="{{ item.img }}">