Skip to content

Instantly share code, notes, and snippets.

@machal
Created February 22, 2012 21:20
Show Gist options
  • Select an option

  • Save machal/1887368 to your computer and use it in GitHub Desktop.

Select an option

Save machal/1887368 to your computer and use it in GitHub Desktop.
Border transition on hover / animace zmen vlastnosti ramecku po najeti mysi
/**
* Border transition on hover / animace zmen vlastnosti ramecku po najeti mysi
* Source / zdroj: http://jsdo.it/ksk1015/cLLl/fullscreen
*/
.circle {
display: inline-block;
width: 150px;
height: 150px;
margin: 0;
padding: 0;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6N0FFN0IxNzM1NTJBMTFFMUFFQ0FDQzU1OTAzNDYyOEMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6N0FFN0IxNzQ1NTJBMTFFMUFFQ0FDQzU1OTAzNDYyOEMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3QUU3QjE3MTU1MkExMUUxQUVDQUNDNTU5MDM0NjI4QyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3QUU3QjE3MjU1MkExMUUxQUVDQUNDNTU5MDM0NjI4QyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtoL8OgAAA0fSURBVHja7F17UJTX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) center center no-repeat;
/* Barva pozadi s fallbackem pro prohlizece co neumi CSS gradienty */
background-color: #660066;
background-color: linear-gradient(45deg, #FF33FF, #660066);
/* Vytvorime kruhovy tvar */
border-radius: 50%;
/* Chceme, aby se sirka ramecku nepripocitala k celkove sirce elementu */
box-sizing: border-box;
/* Ramecek zabira celou plochu elementu a je polopruhledny (ano, to muze byt) */
border: 75px rgba(0,0,0,.5) solid;
/* Rekneme jak rychle a jakou casovou funkci ma prohlizec animovat prechod stavu pri zmene vlastnosti */
transition: .2s ease;
}
.circle:hover {
/* Po najeti mysi zmensime plochu ramecku */
border-width: 10px;
}
<!-- content to be placed inside <body>…</body> -->
<p class="circle"></p>
{"view":"split","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment