Skip to content

Instantly share code, notes, and snippets.

View carlos-sanchez's full-sized avatar

Carlos Sánchez carlos-sanchez

2 followers · 0 following
View GitHub Profile
@carlos-sanchez
carlos-sanchez / modal-outline.css
Created November 12, 2013 03:17
CSS Modal using big outline
.modal {
/* some styles to position the modal at the center of the page */
position: fixed;
top: 50%;
left: 50%;
width: 300px;
line-height: 200px;
height: 200px;
margin-left: -150px;
@carlos-sanchez
carlos-sanchez / keyframes-prefixes.css
Created November 12, 2013 16:10
Keyframes AnimationPrefixes
@-webkit-keyframes NAME-YOUR-ANIMATION {
0% { opacity: 0; }
100% { opacity: 1; }
}
@-moz-keyframes NAME-YOUR-ANIMATION {
0% { opacity: 0; }
100% { opacity: 1; }
}
@-o-keyframes NAME-YOUR-ANIMATION {
0% { opacity: 0; }
@carlos-sanchez
carlos-sanchez / svg-alt.html
Created November 12, 2013 18:04
Graphics don't scale up as you zoom in. svg size can be move to the stylesheet, but img size must stay inline.
<svg width="96" height="96">
<image xlink:href="svg.svg" src="svg.png" width="96" height="96" />
</svg>
@carlos-sanchez
carlos-sanchez / svg.html
Last active December 28, 2015 03:29
With this technique svg graphics scale up as you zoom in. It is dependent on JS because it uses onerror.
<img src="image.svg" onerror="this.src='image.png'; this.onerror=null;">
@carlos-sanchez
carlos-sanchez / text-overflow.css
Created November 13, 2013 03:04
Text Overflow
 text-overflow: ellipsis; 
@carlos-sanchez
carlos-sanchez / svg-bg
Created November 13, 2013 03:05
SVG backgrounds
.my-element {
  background-image: url(fallback.png);
  background-image: url(image.svg), none;
}
@carlos-sanchez
carlos-sanchez / dialog.css
Created November 13, 2013 03:08
Poco soporte de momento 1. By default, a dialog is centered vertically in the viewport when opened. It is still absolutely positioned so it can be scrolled away. The viewport centering occurs regardless of the dialog’s position in the DOM tree. 2. Dialogs can be modal. When a modal dialog is opened, it blocks the rest of the document. There is a…
.modal{
  /* arbitrary styling */
  background-color: white;
  border-radius: 5px;
  box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
  height:200px;
  width:300px;
 
  /* change position to fixed if you want to prevent the dialog from scrolling away, and center it */
  position:fixed;
@carlos-sanchez
carlos-sanchez / text-colums.css
Created November 13, 2013 03:09
Multiple colums of text
-moz-column-count: 3;
-moz-column-gap: 5px;
-webkit-column-count: 3;
-webkit-column-gap: 5px;
column-count: 3;
column-gap: 5px;
@carlos-sanchez
carlos-sanchez / replace-text.css
Created November 13, 2013 03:11
Replace text with CSS We could use The Checkbox Hack here to make the text swap entirely CSS. The replacement happens the exact same way, it just happens when an invisible checkbox right before the word is either :checked or not. This means the word needs to be in a label as well, which is able to toggle that checkbox’s state through the for att…
#example {
  position: relative;
}
#example-checkbox {
  display: none;
}
#example-checkbox:checked + #example:after {
  content: "Hide";
  position: absolute;
  top: 0;
@carlos-sanchez
carlos-sanchez / modal-outline.css
Created November 13, 2013 03:15
Modal using big outline
.modal {
    /* some styles to position the modal at the center of the page */
    position: fixed;
    top: 50%;
    left: 50%;
    width: 300px;
    line-height: 200px;
    height: 200px;
    margin-left: -150px;
    margin-top: -100px;