Image resizing background cover

http://stackoverflow.com/questions/11670874/is-there-an-equivalent-to-background-size-cover-and-contain-for-image-elements

There is an object-fit property(No IE support) that is exactly what I need:

http://jsfiddle.net/danield770/n8qxcp4b/1/

but in the meantime this was a clever solution:

 

body {  margin: 0;}img {  position: fixed;  width: 0;  height: 0;  padding: 50vh 50vw;  background: url(http://lorempixel.com/1500/1000/city/Dummy-Text) no-repeat;  background-size: cover;}<img src=”http://placehold.it/1500×1000&#8243; />

Leave a comment

Filed under Technical Links

Pure CSS multiline text with ellipsis

@import “compass/css3”;

/* Martin Wolf CodePen Standard */

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700);

* {
margin: 0;
padding: 0;
@include box-sizing(border-box);
}

body {
padding: 3em 2em;
font-family: ‘Open Sans’, Arial, sans-serif;
color: #cf6824;
background: #f7f5eb;
}

/* END Martin Wolf CodePen Standard */
$font-size: 26px;
$line-height: 1.4;
$lines-to-show: 3;

h2 {
display: block; /* Fallback for non-webkit */
display: -webkit-box;
max-width: 400px;
height: $font-size*$line-height*$lines-to-show; /* Fallback for non-webkit */
margin: 0 auto;
font-size: $font-size;
line-height: $line-height;
-webkit-line-clamp: $lines-to-show;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}

<h2>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et.</h2>

 

Leave a comment

Filed under Technical Links

css bubble

http://nicolasgallagher.com/pure-css-speech-bubbles/demo/

.bubble{

padding:25px;
position:relative;
border: 3px solid $brandBlue;

&::before{
content: “”;
position: absolute;
bottom: -50px;
right:25px;
border-width: 50px 50px 0 0;
border-style: solid;
border-color: $brandBlue transparent;
display: block;
width: 0;
}
&::after{
content: “”;
position: absolute;
bottom: -43px;
right:28px;
border-width: 43px 43px 0 0;
border-style: solid;
border-color: #fff transparent;
display: block;
width: 0;
}
}

Leave a comment

Filed under Technical Links

flip image

http://css3.bradshawenterprises.com/flip/

style:

#f1_container {
position: relative;
margin: 10px auto;
width: 450px;
height: 281px;
z-index: 1;
}
#f1_container {
perspective: 1000;
}
#f1_card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 1.0s linear;
}
#f1_container:hover #f1_card {
transform: rotateY(180deg);
box-shadow: -5px 5px 5px #aaa;
}
.face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.face.back {
display: block;
transform: rotateY(180deg);
box-sizing: border-box;
padding: 10px;
color: white;
text-align: center;
background-color: #aaa;
}

html

This is nice for exposing more information about an image.

Any content can go here.

</div>
</div>

 

 

Leave a comment

Filed under Technical Links

svg fallbacks

SVG Fallbacks

 

<svg width=96 height=96> <image xlink:href=svg.svg src=svg.png width=96 height=96 /> </svg>

Leave a comment

Filed under Technical Links

Hangfire background jobs and workers for asp.net

Hangfire background jobs and workers for asp.net

http://hangfire.io/

Leave a comment

Filed under Technical Links

wamp custom vhosts menu

Open file config.inc.php in folder C:\wamp\scripts

after $wwwDir = $c_installDir.’/www’;

enter:

$vhosts = $c_apacheVersionDir.’/apache’.$wampConf[‘apacheVersion’]
.’/’.$wampConf[‘apacheConfDir’].’/extra/httpd-vhosts.conf’;

Open file wampmanager.tpl in folder C:\wamp and paste before this line:

Type: item; Caption: “${w_wwwDirectory}”; Action: shellexecute; FileName: “${wwwDir}”; Glyph: 2

Type: item; Caption: “vhosts”; Action: shellexecute; FileName: “${vhosts}”; Glyph: 6

Then, save all files and restart wamp to take effect

Leave a comment

Filed under Technical Links