Daily Pens

2018-03-18 10:49:35 CODEPEN, HTML , CSS

I play on codepen almost every day and just found a homemade API-endpoint to collect all pens, PERFECT now i can search and filter them better. And of course i can implement them here easy. Just check it out in the sidemenu under Daily PENS.


Wierd CSS

2017-07-17 06:54:48 CSS, HTML

Just a simple wierd css-animation , no idea why just wanted to try and animate something .

Code on Codepen https://codepen.io/hugosp/pen/owOyJb


Simple Card

2017-06-20 18:22:48 HTML, CSS , SIMPLE

Just a simple card-layout in html/css can be used as starter for page or info-site

Code up on Codepen just grab it.


CSS Center

2017-02-07 19:39:59 CSS, HTML

1: Using Flexbox

<div class="center">
    <h1>I'm Centered!</h1>
</div>

Center everything within the div.

.center {
   display: flex; 		/* activate flexbox   */
   align-items: center; 	/* align vertically   */
   justify-content: center; 	/* align horizontally */
}

2: Using Table (Compatible Mode)

<div class="center">
    <div class="cell">
        <div class="content">
            <h1>I'm Centered!</h1>
        </div>
    </div>
</div>

Unlike flexbox, you will need three containers:

.center {
    display: table; 		/* .center acts like a table */
}

.cell {
    display: table-cell; 	/* make .cell act like a cell*/
    vertical-align: middle; 	/* align the cell middle */
}

.content {
    margin-left: auto; 		/* Center content */
    margin-right: auto; 	/* Center content */
    text-align: center; 	/* Center items */
}

CSS Flexbox Grid

2017-02-07 19:38:45 CSS, HTML, FLEXBOX

AweSome minimal css-flexbox-grid.

:root {
    --grid: {
        display: flex;
            flex-wrap: wrap;
              
    };
    --cell: {
        box-sizing: border-box;
            flex-shrink: 0;
              
    };

}

.Grid            { @apply --grid;  }
.Grid.\-top      { align-items: flex-start;  }
.Grid.\-middle   { align-items: center;  }
.Grid.\-bottom   { align-items: flex-end;  }
.Grid.\-stretch  { align-items: stretch;  }
.Grid.\-baseline { align-items: baseline;  }
.Grid.\-left     { justify-content: flex-start;  }
.Grid.\-center   { justify-content: center;  }
.Grid.\-right    { justify-content: flex-end;  }
.Grid.\-between  { justify-content: space-between;  }
.Grid.\-around   { justify-content: space-around;  }

.Cell            { @apply --cell;  }
.Cell.\-fill     { width: 0; min-width: 0; flex-grow: 1;  }
.Cell.\-1of12    { width: calc(100% * 1 / 12);  }
.Cell.\-2of12    { width: calc(100% * 2 / 12);  }
.Cell.\-3of12    { width: calc(100% * 3 / 12);  }
.Cell.\-4of12    { width: calc(100% * 4 / 12);  }
.Cell.\-5of12    { width: calc(100% * 5 / 12);  }
.Cell.\-6of12    { width: calc(100% * 6 / 12);  }
.Cell.\-7of12    { width: calc(100% * 7 / 12);  }
.Cell.\-8of12    { width: calc(100% * 8 / 12);  }
.Cell.\-9of12    { width: calc(100% * 9 / 12);  }
.Cell.\-10of12   { width: calc(100% * 10 / 12);  }
.Cell.\-11of12   { width: calc(100% * 11 / 12);  }
.Cell.\-12of12   { width: 100%;  }

Cred to : 1000ch@GitHub