Carlos Sánchez carlos-sanchez

Head of Product at Real Madrid

2 followers · 0 following

View GitHub Profile

Recently created

Least recently created

Recently updated

Least recently updated

carlos-sanchez / absolute-center.css

Last active November 21, 2018 01:03

Absolute center techniques http://css-tricks.com/centering-css-complete-guide/

	/*
	Cross-browser (including IE8-10)
	Más info: http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/
	*/
	.absolute-center {
	/* height: must be declared */
	margin: auto;
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	}

carlos-sanchez / animated-media-query.css

Created November 13, 2013 04:05

Animated Media Query http://css-tricks.com/animated-media-queries/

	.thing-that-moves {
	position: absolute;
	width: 100px;
	height: 100px;
	background: red;
	top: 0;
	left: 0;
	transition: left 0.5s; /* BYO prefixes */
	}
	@media (min-width: 400px) {

carlos-sanchez / modal-outline.css

Created November 13, 2013 03:15

Modal using big outline

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 / 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 / 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 / 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 / text-overflow.css

Created November 13, 2013 03:04

Text Overflow

text-overflow: ellipsis;

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.

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>

Newer Older

	.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;