I'm using a css3 spinner from http://cssload.net/ I want to know how the scale it up or down using px em or % by changing the height and width on #floatingBarsG. If I set the size 10px higher and 10px wider the icon goes out of shape. Any suggestions ?
Here is a working js fiddle example http://jsfiddle.net/PWLzb/8/
This is the html
<div id="floatingBarsG" style="">
<div id="rotateG_01" class="blockG"></div>
<div id="rotateG_02" class="blockG"></div>
<div id="rotateG_03" class="blockG"></div>
<div id="rotateG_04" class="blockG"></div>
<div id="rotateG_05" class="blockG"></div>
<div id="rotateG_06" class="blockG"></div>
<div id="rotateG_07" class="blockG"></div>
<div id="rotateG_08" class="blockG"></div>
</div>
and css
#floatingBarsG {
position:relative;
width:62px;
height:77px
}
.blockG {
position:absolute;
background-color:#FFFFFF;
width:10px;
height:24px;
-webkit-border-radius:8px 8px 0 0;
-webkit-transform:scale(0.4);
-webkit-animation-name:fadeG;
-webkit-animation-duration:0.5599999999999999s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
border-radius:8px 8px 0 0;
transform:scale(0.4);
animation-name:fadeG;
animation-duration:0.5599999999999999s;
animation-iteration-count:infinite;
animation-direction:linear;
}
#rotateG_01 {
left:0;
top:28px;
-webkit-animation-delay:0.20999999999999996s;
-webkit-transform:rotate(-90deg);
animation-delay:0.20999999999999996s;
transform:rotate(-90deg);
}
#rotateG_02 {
left:8px;
top:10px;
-webkit-animation-delay:0.27999999999999997s;
-webkit-transform:rotate(-45deg);
animation-delay:0.27999999999999997s;
transform:rotate(-45deg);
}
#rotateG_03 {
left:26px;
top:3px;
-webkit-animation-delay:0.35s;
-webkit-transform:rotate(0deg);
animation-delay:0.35s;
transform:rotate(0deg);
}
#rotateG_04 {
right:8px;
top:10px;
-webkit-animation-delay:0.41999999999999993s;
-webkit-transform:rotate(45deg);
animation-delay:0.41999999999999993s;
transform:rotate(45deg);
}
#rotateG_05 {
right:0;
top:28px;
-webkit-animation-delay:0.48999999999999994s;
-webkit-transform:rotate(90deg);
animation-delay:0.48999999999999994s;
transform:rotate(90deg);
}
#rotateG_06 {
right:8px;
bottom:7px;
-webkit-animation-delay:0.5599999999999999s;
-webkit-transform:rotate(135deg);
animation-delay:0.5599999999999999s;
transform:rotate(135deg);
}
#rotateG_07 {
bottom:0;
left:26px;
-webkit-animation-delay:0.63s;
-webkit-transform:rotate(180deg);
animation-delay:0.63s;
transform:rotate(180deg);
}
#rotateG_08 {
left:8px;
bottom:7px;
-webkit-animation-delay:0.7s;
-webkit-transform:rotate(-135deg);
animation-delay:0.7s;
transform:rotate(-135deg);
}
#-webkit-keyframes fadeG {
0% {
background-color:#000000
}
100% {
background-color:#FFFFFF
}
}
#keyframes fadeG {
0% {
background-color:#000000
}
100% {
background-color:#FFFFFF
}
}
This can be done very easily via CSS scale transforms:
#floatingBarsG {
-webkit-transform:scale(2);
-webkit-transform-origin:top left;
-moz-transform:scale(2);
-moz-transform-origin:top left;
-ms-transform:scale(2);
-ms-transform-origin:top left;
-o-transform:scale(2);
-o-transform-origin:top left;
transform:scale(2);
transform-origin:top left;
}
Demo.
Edit from 8 years after posting this answer: Nowadays, all of these prefixes are no longer necessary, so simply using the following would suffice:
#floatingBarsG {
transform:scale(2);
transform-origin:top left;
}
Related
I have a input type="text" field. By intially the field should contain field name. When user clicks on that input field the field name should move up and leave space to enter the value.
I searched in google but I couldn't found any solution related to my need.
It will be great if anyone could help me.
Initally form looks like
After clicking on field
The thing you want can be achieved by implementing material design. Use this: https://codepen.io/sevilayha/pen/IdGKH
* { box-sizing:border-box; }
/* basic stylings ------------------------------------------ */
body { background:url(http://scotch.io/wp-content/uploads/2014/07/61.jpg); }
.container {
font-family:'Roboto';
width:600px;
margin:30px auto 0;
display:block;
background:#FFF;
padding:10px 50px 50px;
}
h2 {
text-align:center;
margin-bottom:50px;
}
h2 small {
font-weight:normal;
color:#888;
display:block;
}
.footer { text-align:center; }
.footer a { color:#53B2C8; }
/* form starting stylings ------------------------------- */
.group {
position:relative;
margin-bottom:45px;
}
input {
font-size:18px;
padding:10px 10px 10px 5px;
display:block;
width:300px;
border:none;
border-bottom:1px solid #757575;
}
input:focus { outline:none; }
/* LABEL ======================================= */
label {
color:#999;
font-size:18px;
font-weight:normal;
position:absolute;
pointer-events:none;
left:5px;
top:10px;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
/* active state */
input:focus ~ label, input:valid ~ label {
top:-20px;
font-size:14px;
color:#5264AE;
}
/* BOTTOM BARS ================================= */
.bar { position:relative; display:block; width:300px; }
.bar:before, .bar:after {
content:'';
height:2px;
width:0;
bottom:1px;
position:absolute;
background:#5264AE;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
.bar:before {
left:50%;
}
.bar:after {
right:50%;
}
/* active state */
input:focus ~ .bar:before, input:focus ~ .bar:after {
width:50%;
}
/* HIGHLIGHTER ================================== */
.highlight {
position:absolute;
height:60%;
width:100px;
top:25%;
left:0;
pointer-events:none;
opacity:0.5;
}
/* active state */
input:focus ~ .highlight {
-webkit-animation:inputHighlighter 0.3s ease;
-moz-animation:inputHighlighter 0.3s ease;
animation:inputHighlighter 0.3s ease;
}
/* ANIMATIONS ================ */
#-webkit-keyframes inputHighlighter {
from { background:#5264AE; }
to { width:0; background:transparent; }
}
#-moz-keyframes inputHighlighter {
from { background:#5264AE; }
to { width:0; background:transparent; }
}
#keyframes inputHighlighter {
from { background:#5264AE; }
to { width:0; background:transparent; }
}
<div class="container">
<h2>Google Material Design in CSS3<small>Inputs</small></h2>
<form>
<div class="group">
<input type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>Name</label>
</div>
<div class="group">
<input type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>Email</label>
</div>
</form>
<p class="footer">
a tutorial by scotch.io
</p>
</div>
Use material design and you can use md-input-container
<md-input-container class="md-block">
<label>Username</label>
<input type="text">
</md-input-container>
Material design input
I have this little carousel that moves on mousehover
http://jsfiddle.net/dpn3t9p6/1/
HTML
<div id ="container">
<div id="parent">
<div class="contentBlock">
<img alt="Les Bourdelles Des Garcons" src="http://www.deblasiis.com/wp-content/uploads/2016/10/MG_4194-copia-3.png">
<p class="bsubtitle11"><span>Les Bourdelles des Garcons</span></p>
</div>
<div class="contentBlock"><img alt="Religio Universalis" src="http://www.deblasiis.com/wp-content/uploads/2016/11/MG_7877-dOUBLE.jpg"></div>
<div class="contentBlock"><img alt="Isal Bed Ollen" src="http://www.deblasiis.com/wp-content/uploads/2016/11/01-N-1.jpg"></div>
</div>
</div>
<span id="panLeft" class="panner" data-scroll-modifier='-1'><</span>
<span id="panRight" class="panner" data-scroll-modifier='1'>></span>
CSS
#container {
width:600px;
overflow:hidden;
}
#parent {
width:6000px;
}
.contentBlock {
font-size:10em;
text-align:center;
line-height:400px;
height:auto;
width:auto;
margin:2px;
float:left;
}
.contentBlock img {
height:600px;
width:auto;
}
.panner {
border:1px solid black;
display:block;
position:fixed;
width:50px;
height:50px;
top:45%;
}
.active {
color:red;
}
#panLeft {
left:0px;
}
#panRight {
right:0px;
}
JS
var scrollHandle = 0,
scrollStep = 5,
parent = $("#container");
//Start the scrolling process
$(".panner").on("mouseenter", function () {
var data = $(this).data('scrollModifier'),
direction = parseInt(data, 10);
$(this).addClass('active');
startScrolling(direction, scrollStep);
});
//Kill the scrolling
$(".panner").on("mouseleave", function () {
stopScrolling();
$(this).removeClass('active');
});
//Actual handling of the scrolling
function startScrolling(modifier, step) {
if (scrollHandle === 0) {
scrollHandle = setInterval(function () {
var newOffset = parent.scrollLeft() + (scrollStep * modifier);
parent.scrollLeft(newOffset);
}, 10);
}
}
function stopScrolling() {
clearInterval(scrollHandle);
scrollHandle = 0;
}
I want a text caption over the image. I can't figure it out, in my tests (https://jsfiddle.net/g5vakqw5/2/) caption will always follow the movement of carousel and won't stay adherent to the image.
Thank you for your time and help
You just need to make the position of the contentBlock relative. See here your jsfiddle
.contentBlock {
position: relative; // <---- here is the change
font-size:10em;
text-align:center;
line-height:400px;
height:auto;
width:auto;
margin:2px;
float:left;
}
(function () {
var scrollHandle = 0,
scrollStep = 5,
parent = $("#container");
//Start the scrolling process
$(".panner").on("mouseenter", function () {
var data = $(this).data('scrollModifier'),
direction = parseInt(data, 10);
$(this).addClass('active');
startScrolling(direction, scrollStep);
});
//Kill the scrolling
$(".panner").on("mouseleave", function () {
stopScrolling();
$(this).removeClass('active');
});
//Actual handling of the scrolling
function startScrolling(modifier, step) {
if (scrollHandle === 0) {
scrollHandle = setInterval(function () {
var newOffset = parent.scrollLeft() + (scrollStep * modifier);
parent.scrollLeft(newOffset);
}, 10);
}
}
function stopScrolling() {
clearInterval(scrollHandle);
scrollHandle = 0;
}
}());
#container {
width:1980px;
overflow:hidden;
}
#parent {
width:2532px;
}
.contentBlock {
position: relative;
font-size:10em;
text-align:center;
line-height:400px;
height:auto;
width:auto;
margin:2px;
float:left;
}
.contentBlock img {
height: 850px;
width:auto;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.contentBlock:hover img {
-webkit-filter: grayscale(0);
filter: grayscale(0);}
.panner {
border:1px solid black;
display:block;
position:fixed;
width:50px;
height:50px;
top:45%;
}
.active {
color:red;
}
#panLeft {
left:0px;
}
#panRight {
right:0px;
}
.bsubtitle11 {
font-weight:300;
font-size:35px;
text-align:center;
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: table;
height: 150px;
left: 0;
position: absolute;
top: 45%;
width: auto;
opacity: 1;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
.contentBlock:hover .bsubtitle11 {
opacity: 1;
}
.bsubtitle11 span {
display: table-cell;
text-align: center;
vertical-align: middle;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id ="container">
<div id="parent">
<div class="contentBlock">
<img alt="Les Bourdelles Des Garcons" src="http://www.deblasiis.com/wp-content/uploads/2016/10/MG_4194-copia-3.png">
<p class="bsubtitle11"><span>Les Bourdelles des Garcons</span></p>
</div>
<div class="contentBlock"><img alt="Religio Universalis" src="http://www.deblasiis.com/wp-content/uploads/2016/11/MG_7877-dOUBLE.jpg"></div>
<div class="contentBlock"><img alt="Isal Bed Ollen" src="http://www.deblasiis.com/wp-content/uploads/2016/11/01-N-1.jpg"></div>
</div>
</div>
<span id="panLeft" class="panner" data-scroll-modifier='-1'><</span>
<span id="panRight" class="panner" data-scroll-modifier='1'>></span>
If you want The text to be fixed and not me with image carousel, Then create one seprate tag add your text and make it position: absolute.
Use top and left values to place it properly over the image:
CSS:
#container {
width:600px;
overflow:hidden;
position: relative:
}
#container p {
position: absolute;
top: 50px;
left: 50px;
font-size: 24px;
font-weight: bold;
}
JS FIDDLE LINK
I'm trying to make a animation with #keyframes. But, the example don't work.
.main{
width:100%;
height:500px;
border: 1px solid black;
}
#keyframes change-bg-color {
0% {
background-color: red;
}
100% {
background-color: blue;
}
}
<div class="main"></div>
You need to reference it within your style declaration via the animation property:
.main{
animation: 5s change-bg-color;
width:100%;
height:500px;
border: 1px solid black;
}
#keyframes change-bg-color {
0% {
background-color: red;
}
100% {
background-color: blue;
}
}
<div class="main"></div>
MDN has a great overview of animations within CSS which will tell you all you need to know about configuring your animation to behave the way you want it to: https://developer.mozilla.org/en/docs/Web/CSS/animation.
I'm creating a pixel grid to represent a count (see image) and wondering what's the best way to go about it.
These tiles will need to be responsive (1px, 2px, 4px). I could build a super large sprite that contains all 196 combinations that is #4X so it scales perfectly to 2px and 1px and then build a css class...
<div class="pixel-block c-000"></div>
<div class="pixel-block c-001"></div>
...there has to be a better way?
Any ideas appreciated.
Here is a example of how it can be done without using a sprite with the 196 combinations, just a grid image and CSS.
The idea is simple:
Have a container that will hold:
The grid image (on top)
A "big" bar that will cover the whole height of the container.
A "small" bar that will cover only the remainder.
The "big bar" will have a width equal to the (count value / 14) * width of the hole in the grid.
The "low bar" will have a height equal to (count value % 14) * height of the hole in the grid.
I used a grid with 3px holes (2px + 1px separation), and the data- attributes to set the values of the count, and an indicator for the big bar (count / 14) and low bar (count % 14).
Here is a demo:
.box {
border:1px solid #6699aa;
width:43px;
height:43px;
position:relative;
background:#aaccff;
overflow:hidden;
display:inline-block;
}
.grid { background:url(http://i.imgur.com/w0jBLzK.png) no-repeat top left;
width:43px;
height:43px;
position:absolute;
top:0;
left:0;
z-index:3;
}
.bigbar {
height:43px;
width:0px;
background:black;
z-index:2;
float:left;
}
.lowbar {
float:left;
width:3px;
height:0px;
position:relative;
background:black;
}
.box[data-big="1"] .bigbar { width:3px; }
.box[data-big="2"] .bigbar { width:6px; }
.box[data-big="3"] .bigbar { width:9px; }
.box[data-big="4"] .bigbar { width:12px; }
.box[data-big="5"] .bigbar { width:15px; }
.box[data-big="6"] .bigbar { width:18px; }
.box[data-big="7"] .bigbar { width:21px; }
.box[data-big="8"] .bigbar { width:24px; }
.box[data-big="9"] .bigbar { width:27px; }
.box[data-big="10"] .bigbar { width:30px; }
.box[data-big="11"] .bigbar { width:33px; }
.box[data-big="12"] .bigbar { width:36px; }
.box[data-big="13"] .bigbar { width:39px; }
.box[data-big="14"] .bigbar { width:42px; }
.box[data-low="1"] .lowbar { height:3px; margin-top:39px; }
.box[data-low="2"] .lowbar { height:6px; margin-top:36px; }
.box[data-low="3"] .lowbar { height:9px; margin-top:33px; }
.box[data-low="4"] .lowbar { height:12px; margin-top:30px; }
.box[data-low="5"] .lowbar { height:15px; margin-top:27px; }
.box[data-low="6"] .lowbar { height:18px; margin-top:24px; }
.box[data-low="7"] .lowbar { height:21px; margin-top:21px; }
.box[data-low="8"] .lowbar { height:24px; margin-top:18px; }
.box[data-low="9"] .lowbar { height:27px; margin-top:15px; }
.box[data-low="10"] .lowbar { height:30px; margin-top:12px; }
.box[data-low="11"] .lowbar { height:33px; margin-top:9px; }
.box[data-low="12"] .lowbar { height:36px; margin-top:6px; }
.box[data-low="13"] .lowbar { height:39px; margin-top:3px; }
.box[data-low="14"] .lowbar { height:42px; margin-top:0px; }
<div class="box" data-count="0" data-big="0" data-low="0">
<div class="grid"></div>
<div class="bigbar"></div>
<div class="lowbar"></div>
</div>
<div class="box" data-count="5" data-big="0" data-low="5">
<div class="grid"></div>
<div class="bigbar"></div>
<div class="lowbar"></div>
</div>
<div class="box" data-count="34" data-big="2" data-low="10">
<div class="grid"></div>
<div class="bigbar"></div>
<div class="lowbar"></div>
</div>
<div class="box" data-count="196" data-big="14" data-low="0">
<div class="grid"></div>
<div class="bigbar"></div>
<div class="lowbar"></div>
</div>
I am trying to create the 'Google Now' microphone icon using pure CSS3.
The icon features a white microphone on a red circular background.
I tried font-awesome but in vain
I need your help to complete this task
No animations or functionality, just the icon
Google Now Icon Only with CSS
DEMO
output :
HTML :
<div class="gn"><div class="mc"></div></div>
CSS :
body{font-size: 15px;}
.gn{
position:relative;
margin: 5% auto;
background-color:#FE2222;
border-radius:50%;
width:10em; height:10em;
}
:before, :after{
content:'';
position:absolute;
background-color:#fff;
}
.gn:after{
top:30%; left:43%;
height:15%; width:14%;
border-top-left-radius:50%;
border-top-right-radius:50%;
}
.gn:before{
top:40%; left:43%;
height:15%; width:14%;
border-bottom-left-radius:50%;
border-bottom-right-radius:50%;
}
.mc{
position:absolute;
top:50%; left:37%;
height:24%;
width:26.5%;
overflow:hidden;
}
.mc:before{
bottom:50%;
width:100%; height:100%;
box-sizing:border-box;
border-radius:50%;
border:0.5em solid #fff;
background:none;
}
.mc:after{
top:50%; left:40%;
width:20%; height:25%;
}
Demo
html
<div class=container><i class=icon-microphone></i></div>
css
#import url(http://thecodeplayer.com/uploads/fonts/fontawesome/css/font-awesome.min.css);
* {
margin:0;
padding:0;
}
.container {
width:150px;
background-color:#e74c3c;
display:block;
margin:100px auto 0px auto;
border-radius:100%;
box-shadow:0px 0px 15px 2px #bdc3c7;
cursor:pointer;
transition:.3s all ease-in;
position:relative;
}
.icon-microphone {
color:white;
font-size:60px;
line-height:150px;
display:block;
text-align:center;
transition:.1s all ease-in;
}
.container:hover {
background-color:#27ae60;
}
.container:active {
background-color:#e74c3c;
}
.container:active .icon-microphone {
color:#ecf0f1;
}