Skip to content

Instantly share code, notes, and snippets.

View julzmon's full-sized avatar
💭
Whasuuuup

Julian julzmon

💭
Whasuuuup
View GitHub Profile
@julzmon
julzmon / gist:17ad324cbc418e1267e9
Created September 2, 2014 00:51
Cut off long lines with ellipsis
.text-overflow {
white-space: nowrap; /* No line breaks */
overflow: hidden; /* Hide text which does not fit the block */
text-overflow: ellipsis; /* Cut off with ellipsis */
display: block; /* Works only for block elements */
}
@julzmon
julzmon / gist:8ccb0b54ce18e84e34f2
Created September 3, 2014 13:27
Fill background to the left
.class:before {
content: "";
width: 9999px;
background: #000;
position: absolute;
top: 0;
bottom: 0;
right: 100%;
}
@julzmon
julzmon / gist:c7aca274a916db4546a0
Created October 15, 2014 20:28
Horizontal scrolling images
.creenshots {
height: 400px;
overflow-x: scroll;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
img {
height: 100%;
display: inline;
}
@julzmon
julzmon / gist:214a0026e504d9e73977
Created October 17, 2014 12:32
Bootstrap 3 no gutter
.no-gutter > [class*='col-'] {
padding-right:0;
padding-left:0;
}
@julzmon
julzmon / gist:5804e5fc44e241c4dac8
Created October 17, 2014 12:34
Bootstrap 3 custom container
@media (min-width: 768px) {
.container-small {
width: 300px;
}
.container-large {
width: 970px;
}
}
@media (min-width: 992px) {
.container-small {
General
1. Site uses a cache buster for expiring .js, .css, and images
2. JavaScript and CSS is minified and concatenated into logical groupings
3. Images have been optimized by ImageOptim (http://imageoptim.com/)
Markup
1. Code does not contain inline JavaScript event listeners
.text p {
position: relative;
top: 50%;
transform: translateY(-50%);
}
.image img {
position: relative;
top: 50%;
transform: translateY(-50%);
.body-overlay{
position: relative;
z-index: 99;
height: 100%;
transition: opacity 0.5s;
}
.body-overlay::after{
position: absolute;
top: 0;
right: 0;
<video autoplay controls id="videoElement">
<source src="rar.mp4">
<source src="rar.webm">
</video>
<script>
var videoElement = document.getElementById("videoElement");
document.addEventListener("visibilitychange", function() {
if (document.hidden) {
videoElement.pause();
<script>
var videoElement = document.getElementById("videoElement");
document.addEventListener("visibilitychange", function() {
if (document.hidden) {
$("#videoElement").animate({volume: 0}, 1000, "linear", function() {
videoElement.pause();
});
} else {
videoElement.play();