CSS

CSS { 5 }

Tuesday, 18 July 2017 06:40

Background from nav menu

Written by
Rate this item
(2 votes)
Cool navbar gradient in CSS:
nav.mainnavigation-menu {
    background: rgba(0, 0, 0, 0) radial-gradient(ellipse at center center , #005982 0%, #002d4b 100%) repeat scroll 0 0;
    display: none;
    height: 100vh;
    left: 0;
    margin-top: 0;
    opacity: 0;
    position: fixed;
    text-align: center;
    top: 0;
    width: 100%;
    z-index: 3;
}

Friday, 23 December 2016 23:55

Cool Zombie Outbreak

Written by
Rate this item
(2 votes)

Cool Zombie Outbreak

STAY INDOORS: ZOMBIE OUTBREAK
STAY INDOORS: ZOMBIE OUTBREAK
<div id="marquee">
<div><span>STAY INDOORS: ZOMBIE OUTBREAK</span></div>
<div><span>STAY INDOORS: ZOMBIE OUTBREAK</span></div>
</div>
<form onsubmit="setText(event)"><label for="textsource">Source text</label> <input id="textsource" title="Text must be 5 to 30 characters in length" pattern=".{5,30}" type="text" value="STAY INDOORS: ZOMBIE OUTBREAK" /> <input type="submit" value="Use" /></form>

<script type="text/javascript" xml="space">// <![CDATA[
function setText(event){
  event.preventDefault();
  leftText.innerText = textsource.value.toUpperCase();
  rightText.innerText = textsource.value.toUpperCase();
}
var leftText = document.querySelector("#marquee div:first-of-type span");
var rightText = document.querySelector("#marquee div:last-of-type span");
var textsource = document.getElementById("textsource");
setText();
// ]]></script>
#marquee {
	margin-top: 3rem;
	perspective: 500px;
	font-size: 0;
	font-family: Agency, sans-serif;
}

#marquee div {
	display: inline-block;
	height: 12rem;
	width: 30rem;
	position: relative;
}

#marquee div:first-of-type {
	background: #e5233e;
	transform-origin: top right;
	transform: rotateY(-40deg);
	color: #fff;
}

#marquee div:last-of-type {
	background: #b31e31;
	transform-origin: top left;
	transform: rotateY(45deg);
	color: #f8c9d9;
}

#marquee div {
	font-size: 8rem;
	overflow: hidden;
}

#marquee div span {
	position: absolute;
	width: 400%;
	line-height: 1.4;
}

@keyframes leftcrawl {
	to {
		transform: translateX(-100rem);
	}
}

@keyframes rightcrawl {
	to {
		transform: translateX(-130rem);
	}
}

#marquee div:first-of-type span {
	transform: translateX(60rem);
	animation: leftcrawl 14s linear infinite;
	text-shadow: 4px 0px 4px rgba(0, 0, 0, 0.3);
}

#marquee div:last-of-type span {
	transform: translateX(30rem);
	animation: rightcrawl 14s linear infinite;
}

#marquee form {
	margin-top: 3rem;
	background: #334;
	padding: 1rem;
	text-align: center;
	color: #fff;
}

#marquee input[type="text"] {
	padding: .5rem;
	font-size: 1.2rem;
	width: 22rem;
}

#marquee input[type="text"] {
	padding: .5rem;
}

l#marquee label {
	margin: 1rem;
}

@media all and (max-width: 993px) {
	#marquee {
		perspective: none;
	}

	#marquee div:last-of-type {
		opacity: 0;
		height: 0;
	}

	#marquee div:first-of-type {
		width: 80%;
	}
}
 

 

Last modified on Saturday, 24 December 2016 00:12
Rate this item
(2 votes)

К примеру мы имеем такой список ul li

<ol>
    <li>Москва</li>
    <li>Вильнюс</li>
    <li>Хьюстон</li>
    <li>Буратино</li>
    <li>Гротеск</li>
</ol>

<ol>
    <li>Америка</li>
    <li>Китай</li>
    <li>Индия</li>
    <li>Таиланд</li>
    <li>Украина</li>
</ol>

 Javascript

// прописываем необходимые буквы в переменную
var letters = "абвгдежзиклмнопрстуфхцчшщэюя";
$.each($('ol'), function() {
    var item = $(this).find('li');
    item.each(function(i){
        $(this).attr("russ", letters[i] + ")");
    });
});

 Прописываем стиль

ol {
  list-style-type: none;
}
ol > li::before {
  display: inline-block;
  content: attr(russ);
  width: 1.2rem;
  margin-left: -2rem;
}

 

Rate this item
(2 votes)

The default Bootstrap grid system utilizes 12 columns with each span having 30px gutter as below. Gutters are the white space between columns. Gutter width seems to be between 20px - 30px. Let's assume it's 30px here.

rJS6T a66f9

For example  - you want to remove gutter space for a specific div only. Let's assume that it's for div which are in the main_content div.

div#main_content div{
  /*
 no gutter for the divs in main_content
 */}

How you can remove the gutter for a specific div without loosing bootstrap responsiveness and not leaving space at the end of the row?

Last modified on Wednesday, 29 April 2015 09:46
Monday, 30 November -0001 02:02

[ CSS ] Do you want to make a font smoothing like on a Mac?

Written by
Rate this item
(4 votes)

Do you want to make a font like on a Mac? Then you need to write this style:

* {
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    padding: 0;
    text-rendering: optimizelegibility;
}
Last modified on Saturday, 08 July 2017 20:59