Related
I have created a 3d cube using CSS, now i want to rotate that cube on my HTML page. My problem is the when the cube rotates, it also moves to the sides, i need it to stay in place and rotate.
i've tried changing the posistion of my div to relative, which scattered the cube sides and still made it rotate to the sides.
I believe the problem has something to do with the transform-origin, however no matter how i change the values it doesn't help.
.spinner div {
position: absolute;
display: inline-block;
width: 300px;
height: 300px;
border: 2px solid rgb(0, 0, 0);
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.4);
text-align: center;
font-size: 100px;
}
.spinner .face1 {
transform: translateZ(150px);
background-color: blue;
}
.spinner .face2 {
transform: rotateY(90deg) translateZ(150px);
background-color: rgb(184, 187, 31);
}
.spinner .face3 {
transform: rotateY(180deg) translateZ(150px);
background-color: green;
}
.spinner .face4 {
transform: rotateY(-90deg) translateZ(150px);
background-color: red;
}
.spinner {
animation: spincube 6s infinite;
transform-style: preserve-3d;
transform-origin: 50% 0;
}
.center-screen {
display: flex;
flex-direction: column;
justify-content: top;
align-items: top;
text-align: center;
margin-top: 10%;
margin-left: 40%;
}
#keyframes spincube {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(-360deg)
}
}
<body>
<div class="center-screen">
<div class="spinner">
<div class="face1">1</div>
<div class="face2">2</div>
<div class="face3">3</div>
<div class="face4">4</div>
</div>
</div>
</body>
as described i expected the cube to stay in place but it slides out to the side.
I would re adjust the transformation like below to make sure the slides are around the center of the main element which is an empty element.
Note the use of translateX to achieve the needed effect.
.spinner div {
position: absolute;
width: 100px;
height: 100px;
border: 2px solid rgb(0, 0, 0);
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.4);
text-align: center;
font-size: 80px;
}
.spinner .face1 {
transform: translateZ(50px) translateX(-50%);
background-color: blue;
}
.spinner .face2 {
transform: rotateY(90deg);
background-color: rgb(184, 187, 31);
}
.spinner .face3 {
transform: translateZ(-50px) translateX(-50%) rotateY(180deg) ;
background-color: green;
}
.spinner .face4 {
transform: translateX(-100%) rotateY(-90deg);
background-color: red;
}
.spinner {
animation: spincube 6s infinite;
transform-style: preserve-3d;
display: inline-block; /* This is important !!*/
outline: 5px solid red; /* to illustrate */
}
.center-screen {
text-align: center;
margin-top: 10%;
}
#keyframes spincube {
to {
transform: rotateY(-360deg)
}
}
<div class="center-screen">
<div class="spinner">
<div class="face1">1</div>
<div class="face2">2</div>
<div class="face3">3</div>
<div class="face4">4</div>
</div>
</div>
You can also rely on left to handle this:
.spinner div {
position: absolute;
width: 100px;
left:-50px;
height: 100px;
border: 2px solid rgb(0, 0, 0);
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.4);
text-align: center;
font-size: 80px;
}
.spinner .face1 {
transform: translateZ(50px);
background-color: blue;
}
.spinner .face2 {
transform: rotateY(90deg);
background-color: rgb(184, 187, 31);
left:0;
}
.spinner .face3 {
transform: translateZ(-50px) rotateY(180deg) ;
background-color: green;
}
.spinner .face4 {
transform:rotateY(-90deg);
background-color: red;
left:-100px;
}
.spinner {
animation: spincube 6s infinite;
transform-style: preserve-3d;
display: inline-block; /* This is important !!*/
outline: 5px solid red; /* to illustrate */
position:relative;
}
.center-screen {
text-align: center;
margin-top: 10%;
}
#keyframes spincube {
to {
transform: rotateY(-360deg)
}
}
<div class="center-screen">
<div class="spinner">
<div class="face1">1</div>
<div class="face2">2</div>
<div class="face3">3</div>
<div class="face4">4</div>
</div>
</div>
You could do something like this:
Credits: https://codepen.io/bcgwebdesign/pen/gRXxxR?editors=0100
Tip: There are a lot of demos of this kind on Codepen
/* keyframes for rotating animation */
#-webkit-keyframes spinX {
from { transform: rotateY(0); }
to { transform: rotateY(360deg); }
}
#-webkit-keyframes spinBoth {
from { transform: rotateY(0) rotateX(0); }
to { transform: rotateY(360deg) rotateX(0deg) ; }
}
#-webkit-keyframes spinY {
from { transform: rotateX(0); }
to { transform: rotateX(360deg); }
}
#-webkit-keyframes recolor {
0% { background: rgba(0,255,0,0.1); }
33% { background: rgba(255,0,0,0.1); }
66% { background: rgba(0,0,255,0.1); }
}
/* scene wrapper */
.wrapper{
height: 300px;
margin-top:0;
position:relative;
perspective: 1000px;
perspective-origin: 50% -50px;
}
/* cube wrapper */
.cube {
position: relative;
margin: 200px auto;
width: 200px;
transform-style: preserve-3d;
animation: spinBoth 5s infinite ease-in-out;
transition: all 1s linear;
}
/* outer cube */
b {
position:absolute;
width:200px;
height:200px;
display:block;
background:rgba(255,0,0,0.1);
box-shadow:inset 0 0 30px rgba(0,0,0,0.2);
font-size:20px;
text-align:center;
line-height:200px;
color:rgba(0,0,0,0.5);
font-family:sans-serif;
text-transform:uppercase;
transition: all 1s linear;
}
b.back{
transform: translateY(-100px) translateZ(-100px) rotateY(180deg);
}
b.right{
transform:translateY(-100px) rotateY(-270deg) translateX(100px);
transform-origin: top right;
}
b.left{
transform:translateY(-100px)rotateY(270deg) translateX(-100px);
transform-origin: center left;
}
b.top{
transform:rotateX(-90deg) translateY(-100px) translateZ(-100px);
transform-origin: top center;
}
b.bottom{
transform:rotateX(90deg) translateY(100px) translateZ(100px);
transform-origin: bottom center;
}
b.front{
transform: translateZ(100px) translateY(-100px);
}
<div class="wrapper">
<div class="cube">
<b class="front">front</b>
<b class="back">back</b>
<b class="top">top</b>
<b class="bottom">bottom</b>
<b class="left">left</b>
<b class="right">right</b>
</div>
</div>
I have a circle progress bar, only with HTML and CSS, I used keyframes for loading (animation). But the loading is from right to left I wanna reverse it. I edit my CSS keyframes but nothing at all. I try also animation reverse again nothing.
Fiddle:
https://jsfiddle.net/d20wu8e4/
My Result (image):
https://ibb.co/0KCSsZY
What I want:
https://ibb.co/MGCpHqS
* {
box-sizing:border-box;
}
.progress {
width: 150px;
height: 150px;
background: none;
margin: 0 auto;
box-shadow: none;
position: relative;
}
.progress:after {
content: "";
width: 100%;
height: 100%;
border-radius: 50%;
border: 3px solid #fff;
position: absolute;
top: 0;
left: 0;
opacity: 0.5;
}
.progress>span {
width: 50%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
z-index: 1;
}
.progress .progress-left {
left: 0;
}
.progress .progress-bar {
width: 100%;
height: 100%;
background: none;
border-width: 2px;
border-style: solid;
position: absolute;
top: 0;
}
.progress .progress-left .progress-bar {
left: 100%;
border-top-right-radius: 80px;
border-bottom-right-radius: 80px;
border-left: 0;
-webkit-transform-origin: center left;
transform-origin: center left;
}
.progress .progress-right {
right: 0;
}
.progress .progress-right .progress-bar {
left: -100%;
border-top-left-radius: 80px;
border-bottom-left-radius: 80px;
border-right: 0;
-webkit-transform-origin: center right;
transform-origin: center right;
animation: loading 1.8s linear forwards;
}
.progress .progress-value {
width: 79%;
height: 79%;
border-radius: 50%;
background: none;
font-size: 24px;
color: black;
line-height: 135px;
text-align: center;
position: absolute;
top: 5%;
left: 5%;
}
.progress.one .progress-bar {
border-color: black;
}
.progress.one .progress-left .progress-bar {
animation: loading-1 1s linear forwards 1.8s;
}
#keyframes loading {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
}
#keyframes loading-1 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
}
<div class="container bg-danger">
<div class="row mt-5">
<div class="progress one">
<span class="progress-left">
<span class="progress-bar"></span>
</span>
<span class="progress-right ">
<span class="progress-bar"></span>
</span>
<div class="progress-value">73%</div>
</div>
</div>
</div>
As I commented, the trivial solution is to rotate the whole animation:
* {
box-sizing:border-box;
}
.progress {
width: 150px;
height: 150px;
background: none;
margin: 0 auto;
box-shadow: none;
position: relative;
transform: scaleX(-1);
}
.progress-value {
transform: scaleX(-1);
}
.progress:after {
content: "";
width: 100%;
height: 100%;
border-radius: 50%;
border: 3px solid #fff;
position: absolute;
top: 0;
left: 0;
opacity: 0.5;
}
.progress>span {
width: 50%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
z-index: 1;
}
.progress .progress-left {
left: 0;
}
.progress .progress-bar {
width: 100%;
height: 100%;
background: none;
border-width: 2px;
border-style: solid;
position: absolute;
top: 0;
}
.progress .progress-left .progress-bar {
left: 100%;
border-top-right-radius: 80px;
border-bottom-right-radius: 80px;
border-left: 0;
-webkit-transform-origin: center left;
transform-origin: center left;
}
.progress .progress-right {
right: 0;
}
.progress .progress-right .progress-bar {
left: -100%;
border-top-left-radius: 80px;
border-bottom-left-radius: 80px;
border-right: 0;
-webkit-transform-origin: center right;
transform-origin: center right;
animation: loading 1.8s linear forwards;
}
.progress .progress-value {
width: 79%;
height: 79%;
border-radius: 50%;
background: none;
font-size: 24px;
color: black;
line-height: 135px;
text-align: center;
position: absolute;
top: 5%;
left: 5%;
}
.progress.one .progress-bar {
border-color: black;
}
.progress.one .progress-left .progress-bar {
animation: loading-1 1s linear forwards 1.8s;
}
#keyframes loading {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
}
#keyframes loading-1 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
}
<div class="progress one">
<span class="progress-left">
<span class="progress-bar"></span>
</span>
<span class="progress-right ">
<span class="progress-bar"></span>
</span>
<div class="progress-value">73%</div>
</div>
By the way here is another idea that rely on less code. The trick is to consider clip-path where you will adjust the position of the different points in order to create the needed animation
.box {
width:150px;
height:150px;
margin:20px;
box-sizing:border-box;
font-size:30px;
display:flex;
align-items:center;
justify-content:center;
position:relative;
z-index:0;
}
.box:before {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
border:5px solid #000;
border-radius:50%;
transform:rotate(45deg);
clip-path:polygon(50% 50%,0 0,0 0,0 0, 0 0,0 0);
animation:change 2s linear forwards;
}
#keyframes change {
25% {
clip-path:polygon(50% 50%,0 0, 0 100%,0 100%,0 100%,0 100%);
}
50% {
clip-path:polygon(50% 50%,0 0,0 100%, 100% 100%, 100% 100%,100% 100%);
}
75% {
clip-path:polygon(50% 50%,0 0,0 100%,100% 100%, 100% 0,100% 0);
}
100% {
clip-path:polygon(50% 50%,0 0,0 100%,100% 100%, 100% 0, 0% 0%);
}
}
body {
background:pink;
}
<div class="box">
73%
</div>
To better understand the animation, add background and remove the radius. We basically have 6 points in the polygon where 2 are fixed (the center (50% 50%) and top one (0 0)) then we move the 4 others to put them in the corners. The trick is to move them together and we leave one at each corner (each state of the animation).
.box {
width:100px;
height:100px;
margin:50px;
box-sizing:border-box;
font-size:30px;
display:flex;
align-items:center;
justify-content:center;
position:relative;
z-index:0;
background:rgba(0,0,0,0.5);
}
.box:before {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
border:5px solid #000;
background:red;
transform:rotate(45deg);
clip-path:polygon(50% 50%,0 0,0 0,0 0, 0 0,0 0);
animation:change 5s linear forwards;
}
#keyframes change {
25% {
clip-path:polygon(50% 50%,0 0, 0 100%,0 100%,0 100%,0 100%);
}
50% {
clip-path:polygon(50% 50%,0 0,0 100%, 100% 100%, 100% 100%,100% 100%);
}
75% {
clip-path:polygon(50% 50%,0 0,0 100%,100% 100%, 100% 0,100% 0);
}
100% {
clip-path:polygon(50% 50%,0 0,0 100%,100% 100%, 100% 0, 0% 0%);
}
}
body {
background:pink;
}
<div class="box">
73%
</div>
With this code you have the full animation, simply adjust the final state or remove some states to stop it where you want.
Ex with 75% (we remove the last state)
.box {
width:150px;
height:150px;
margin:20px;
box-sizing:border-box;
font-size:30px;
display:flex;
align-items:center;
justify-content:center;
position:relative;
z-index:0;
}
.box:before {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
border:5px solid #000;
border-radius:50%;
transform:rotate(45deg);
clip-path:polygon(50% 50%,0 0,0 0,0 0, 0 0,0 0);
animation:change 3s linear forwards;
}
#keyframes change {
33% {
clip-path:polygon(50% 50%,0 0, 0 100%,0 100%,0 100%,0 100%);
}
66% {
clip-path:polygon(50% 50%,0 0,0 100%, 100% 100%, 100% 100%,100% 100%);
}
100% {
clip-path:polygon(50% 50%,0 0,0 100%,100% 100%, 100% 0,100% 0);
}
}
body {
background:pink;
}
<div class="box">
75%
</div>
With 66% (we remove the last state and we change the percentage of the third one)
.box {
width:150px;
height:150px;
margin:20px;
box-sizing:border-box;
font-size:30px;
display:flex;
align-items:center;
justify-content:center;
position:relative;
}
.box:before {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
border:5px solid #000;
border-radius:50%;
transform:rotate(45deg);
clip-path:polygon(50% 50%,0 0,0 0,0 0, 0 0,0 0);
animation:change 2s linear forwards;
}
#keyframes change {
33% {
clip-path:polygon(50% 50%,0 0, 0 100%,0 100%,0 100%,0 100%);
}
66% {
clip-path:polygon(50% 50%,0 0,0 100%, 100% 100%, 100% 100%,100% 100%);
}
100% {
clip-path:polygon(50% 50%,0 0,0 100%,100% 100%, 100% 0,100% 40%);
}
}
<div class="box">
75%
</div>
with 10% (only one state)
.box {
width:150px;
height:150px;
margin:20px;
box-sizing:border-box;
font-size:30px;
display:flex;
align-items:center;
justify-content:center;
position:relative;
}
.box:before {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
border:5px solid #000;
border-radius:50%;
transform:rotate(45deg);
clip-path:polygon(50% 50%,0 0,0 0,0 0, 0 0,0 0);
animation:change 1s linear forwards;
}
#keyframes change {
100% {
clip-path:polygon(50% 50%,0 0, 0 40%,0 40%,0 40%,0 40%);
}
}
body {
background:pink;
}
<div class="box">
10%
</div>
This progress works in new blink/webkit browsers since it uses conic-gradient(). In addition, to change the progress we use css variables, so animation will require JS.
The idea is to create a conic gradient of black to transparent, and change the degrees according to the progress. To get a line instead of a circle, I use an inner gradient from white to white, that doesn't cover the border (background-clip: content-box) as suggested by #TemaniAfif.
Play with the values of the input box to see the progress.
const progress = document.querySelector('.circular-progress')
const updateProgress = value => {
progress.style.setProperty('--percentage', `${value * 3.6}deg`)
progress.innerText = `${value}%`
}
updateProgress(36)
document.querySelector('input')
.addEventListener('input', e => {
updateProgress(e.currentTarget.value)
})
.circular-progress {
display: flex;
width: 150px;
height: 150px;
border:5px solid transparent;
border-radius: 50%;
align-items: center;
justify-content: center;
font-size: 1.5em;
background:
linear-gradient(#fff, #fff) content-box no-repeat,
conic-gradient(black var(--percentage,0), transparent var(--percentage,0)) border-box;
--percentage: 0deg;
}
<div class="circular-progress"></div>
<br />
Progress value: <input type="number" min="0" max="100" value="36">
And for the other direction (added by #TemaniAfif):
const progress = document.querySelector('.circular-progress')
const updateProgress = value => {
progress.style.setProperty('--percentage', `${value * 3.6}deg`)
progress.innerText = `${value}%`
}
updateProgress(36)
document.querySelector('input')
.addEventListener('input', e => {
updateProgress(e.currentTarget.value)
})
.circular-progress {
display: flex;
width: 150px;
height: 150px;
border:5px solid transparent;
border-radius: 50%;
align-items: center;
justify-content: center;
font-size: 1.5em;
background:
linear-gradient(#fff, #fff) content-box no-repeat,
conic-gradient(from calc(-1*var(--percentage)), black var(--percentage,0), transparent var(--percentage,0)) border-box;
--percentage: 0deg;
}
<div class="circular-progress"></div>
<br />
Progress value: <input type="number" min="0" max="100" value="36">
A variation on the same idea, is to create progress circle with multiple colors, and then hide it using a gradient from transparent to white. Make the transparent area bigger to expose the colored line.
const progress = document.querySelector('.circular-progress')
const updateProgress = value => {
progress.style.setProperty('--percentage', `${value * 3.6}deg`)
progress.innerText = `${value}%`
}
updateProgress(80)
document.querySelector('input')
.addEventListener('input', e => {
updateProgress(e.currentTarget.value)
})
.circular-progress {
display: flex;
width: 150px;
height: 150px;
border: 5px solid transparent;
border-radius: 50%;
align-items: center;
justify-content: center;
font-size: 1.5em;
background:
linear-gradient(#fff, #fff) content-box no-repeat,
conic-gradient(transparent var(--percentage, 0), white var(--percentage, 0)) border-box,
conic-gradient(green 120deg, yellow 120deg 240deg, red 240deg) border-box;
--percentage: 0deg;
}
<div class="circular-progress"></div>
<br /> Progress value: <input type="number" min="0" max="100" value="80">
When giving e.g. a <div> a box-shadow as well as rotating it will cause a rotation of the box-shadow direction - which is problematic when the box-shadow should create an illusion of lighting.
Example: https://jsfiddle.net/5h7z4swk/
div {
width: 50px;
height: 50px;
margin: 20px;
box-shadow: 10px 10px 10px #000;
display: inline-block;
}
#box1 {
background-color: #b00;
}
#box2 {
background-color: #0b0;
transform: rotate(30deg);
}
#box3 {
background-color: #00b;
transform: rotate(60deg);
}
#box4 {
background-color: #b0b;
transform: rotate(90deg);
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#box6 {
background-color: #0bb;
animation-name: spin;
animation-duration: 2s;
animation-iteration-count: infinite;
}
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
<div id="box6"></div>
The answer to this problem should look similar to this mock up:
How can I rotate a <div> and still keep the box-shadow going the same direction?
The solution should be pure CSS...
Note: The animation in the CSS is for demonstration purposes. The use case will use JavaScript to set the rotation. But the JavaScript will know nothing about the box-shadow as it is in the responsibility of the design to define a (or many...) shadows. That's why it should be a pure CSS solution.
Keeping direction of an offset box-shadow consistent during rotation is simple with CSS transforms.
This approach relies on the fact that the transform origin is moved with the transforms. This means that when several transforms are set on the same element, the coordinate system of each transform changes according to the previous ones.
In the following example, the blue element is a pseudo element and the shadow is the div element:
div {
width: 40px; height: 40px;
margin: 40px;
box-shadow: 0px 0px 10px 5px #000;
animation: spinShadow 2s infinite;
background-color: #000;
}
#keyframes spinShadow {
to { transform: rotate(360deg); }
}
div:before {
content: '';
position: absolute;
left:-5px; top:-5px;
width: 50px; height: 50px;
transform: rotate(0deg) translate(-10px, -10px) rotate(0deg);
animation:inherit;
animation-name: spinElt;
background-color: #0bb;
}
#keyframes spinElt {
to { transform: rotate(-360deg) translate(-10px, -10px) rotate(360deg); }
}
<div></div>
Explanation of the transition property on the pseudo element (See the following code snippet for an illustration of the steps):
transform: rotate(-360deg) translate(-10px, -10px) rotate(360deg)
rotate(-360deg) counters the rotation of the parent to make the pseudo element static.
translate(-10px, -10px) the pseudo element is translated to make the shadow offset
rotate(360deg) the pseudo element is rotated in the same direction as parent
div {
width: 40px; height: 40px;
margin: 40px;
box-shadow: 0px 0px 10px 5px #000;
animation: spinShadow 2s infinite;
background-color: #000;
}
#keyframes spinShadow {
to { transform: rotate(360deg); }
}
div:before {
content: '';
position: absolute;
left:-5px; top:-5px;
width: 50px; height: 50px;
animation:inherit;
background-color: #0bb;
}
#first:before{
transform: rotate(0deg);
animation-name: first;
}
#keyframes first {
to { transform: rotate(-360deg); }
}
#second:before{
transform: rotate(0deg) translate(-10px, -10px);
animation-name: second;
}
#keyframes second {
to { transform: rotate(-360deg) translate(-10px, -10px); }
}
#complete:before{
transform: rotate(0deg) translate(-10px, -10px) rotate(0deg);
animation-name: complete;
}
#keyframes complete {
to { transform: rotate(-360deg) translate(-10px, -10px) rotate(360deg); }
}
<ol>
<li>Counter rotate:<div id="first"></div></li>
<li>Translate :<div id="second"></div></li>
<li>Rotate:<div id="complete"></div></li>
<ol>
You could as well integrate box-shadow direction inside animation frames:
div {
display: inline-block;
margin: 1em ;
height: 50px;
width: 50px;
box-shadow: 15px 15px 15px 5px gray;
animation: rte 5s infinite linear;
}
.red {
background: red
}
.green {
background: green;
animation-delay:2s;
}
.blue {
background: blue;
animation-delay:4s;
}
.bob {
background: #b0b;
animation-delay:6s;
}
.cyan {
background: cyan;
animation-delay:8s;
}
#keyframes rte {
25% {
box-shadow: 15px -15px 15px 5px gray;
}
50% {
box-shadow: -15px -15px 15px 5px gray;
}
75% {
box-shadow: -15px 15px 15px 5px gray;
}
100% {
transform: rotate(360deg);
}
}
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
<div class="bob"></div>
<div class="cyan"></div>
Inspired by the other answers I created my own answer as well:
https://jsfiddle.net/zoxgbcrg/1/
.shadow {
background-color: black !important;
width: 40px;
height: 40px;
box-shadow: 0px 0px 10px 5px #000;
margin-top: 35px;
margin-left: 35px;
position: absolute;
z-index: -1;
}
<div class="box1 shadow"></div><div class="box1"></div>
The trick is also to create an additional <div> to handle the shadow. In my case it's not a :before but a real DOM element that is moved by margin.
Note: it seems that of today (31.01.2016) Firefox and Chrome have a subtile rendering difference. So for Firefox https://jsfiddle.net/zoxgbcrg/ is creating the desired result, for Chrome I suggest https://jsfiddle.net/zoxgbcrg/1/
http://codepen.io/web-tiki/pen/HhCyd
I am working using the above pen from a similar question. I was able to edit the size of the hexagon editing the width property and padding but I wanted to add a border to the hexagon, I was able to the left and right of the hexagon by adding a border and editing the box-sizing of the category li div element but was not able to get it for the other sides of the hexagon by editing the category li element.
body{
font-family: 'Open Sans', arial, sans-serif;
background:rgb(0, 0, 0);
}
*{
margin:0;
padding:0;
}
#categories{
overflow:hidden;
width:90%;
margin:0 auto;
}
.clr:after{
content:"";
display:block;
clear:both;
}
#categories li{
position:relative;
border-style: solid;
border-width:10px;
list-style-type:none;
width:27.85714285714286%; /* = (100-2.5) / 3.5 */
padding-bottom: 32.16760145166612%; /* = width /0.866 */
float:left;
overflow:hidden;
visibility:hidden;
-webkit-transform: rotate(-60deg) skewY(30deg);
-ms-transform: rotate(-60deg) skewY(30deg);
transform: rotate(-60deg) skewY(30deg);
}
#categories li:nth-child(3n+2){
margin:0 1%;
}
#categories li:nth-child(6n+4){
margin-left:0.5%;
}
#categories li:nth-child(6n+4), #categories li:nth-child(6n+5), #categories li:nth-child(6n+6) {
margin-top: -6.9285714285%;
margin-bottom: -6.9285714285%;
-webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
-ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
transform: translateX(50%) rotate(-60deg) skewY(30deg);
}
#categories li:nth-child(6n+4):last-child, #categories li:nth-child(6n+5):last-child, #categories li:nth-child(6n+6):last-child{
margin-bottom:0%;
}
#categories li *{
position:absolute;
visibility:visible;
}
#categories li > div{
border-style: solid;
border-width: 5px;
box-sizing:border-box;
width:100%;
height:100%;
text-align:center;
color:#fff;
overflow:hidden;
-webkit-transform: skewY(-30deg) rotate(60deg);
-ms-transform: skewY(-30deg) rotate(60deg);
transform: skewY(-30deg) rotate(60deg);
-webkit-backface-visibility:hidden;
}
/* HEX CONTENT */
#categories li img{
left:-100%; right:-100%;
width: auto; height:100%;
margin:0 auto;
}
#categories div h1, #categories div p{
width:90%;
padding:0 5%;
background-color:#008080; background-color: rgba(0, 128, 128, 0.8);
font-family: 'Raleway', sans-serif;
-webkit-transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out;
-ms-transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out;
transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out;
}
#categories li h1{
bottom:110%;
font-style:italic;
font-weight:normal;
font-size:1.5em;
padding-top:100%;
padding-bottom:100%;
}
#categories li h1:after{
content:'';
display:block;
position:absolute;
bottom:-1px; left:45%;
width:10%;
text-align:center;
z-index:1;
border-bottom:2px solid #fff;
}
#categories li p{
padding-top:50%;
top:110%;
padding-bottom:50%;
}
/* HOVER EFFECT */
#categories li div:hover h1 {
bottom:50%;
padding-bottom:10%;
}
#categories li div:hover p{
top:50%;
padding-top:10%;
}
This worked pretty well for me, hope it will be helpful for you as well.
<div class="hexagon"></div>
.hexagon {
position: relative;
width: 300px;
height: 173.21px;
background-color: #64C7CC;
margin: 86.60px 0;
border-left: solid 5px #333333;
border-right: solid 5px #333333;
}
.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
z-index: 1;
width: 212.13px;
height: 212.13px;
-webkit-transform: scaleY(0.5774) rotate(-45deg);
-ms-transform: scaleY(0.5774) rotate(-45deg);
transform: scaleY(0.5774) rotate(-45deg);
background-color: inherit;
left: 38.9340px;
}
.hexagon:before {
top: -106.0660px;
border-top: solid 7.0711px #333333;
border-right: solid 7.0711px #333333;
}
.hexagon:after {
bottom: -106.0660px;
border-bottom: solid 7.0711px #333333;
border-left: solid 7.0711px #333333;
}
For image inside hexagon use this:
<div class="hexagon">
<div class="hexTop"></div>
<div class="hexBottom"></div>
</div>
.hexagon {
position: relative;
width: 300px;
height: 173.21px;
margin: 86.60px 0;
background-image: url(http://you_image_url.jpg);
background-size: auto 334.8632px;
background-position: center;
border-left: solid 5px #333333;
border-right: solid 5px #333333;
}
.hexTop,
.hexBottom {
position: absolute;
z-index: 1;
width: 212.13px;
height: 212.13px;
overflow: hidden;
-webkit-transform: scaleY(0.5774) rotate(-45deg);
-ms-transform: scaleY(0.5774) rotate(-45deg);
transform: scaleY(0.5774) rotate(-45deg);
background: inherit;
left: 38.93px;
}
/*counter transform the bg image on the caps*/
.hexTop:after,
.hexBottom:after {
content: "";
position: absolute;
width: 290.0000px;
height: 167.4315780649915px;
-webkit-transform: rotate(45deg) scaleY(1.7321) translateY(-83.7158px);
-ms-transform: rotate(45deg) scaleY(1.7321) translateY(-83.7158px);
transform: rotate(45deg) scaleY(1.7321) translateY(-83.7158px);
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
background: inherit;
}
.hexTop {
top: -106.0660px;
border-top: solid 7.0711px #333333;
border-right: solid 7.0711px #333333;
}
.hexTop:after {
background-position: center top;
}
.hexBottom {
bottom: -106.0660px;
border-bottom: solid 7.0711px #333333;
border-left: solid 7.0711px #333333;
}
.hexBottom:after {
background-position: center bottom;
}
.hexagon:after {
content: "";
position: absolute;
top: 2.8868px;
left: 0;
width: 290.0000px;
height: 167.4316px;
z-index: 2;
background: inherit;
}
I've been trying to scroll from a bootstrap nav links to matching anchors on my page using only CSS (no jquery). This answer from #jesus-bejarano (CSS: pure CSS scroll animation) with matching jsfiddle (http://jsfiddle.net/YYPKM/3/) seems to be a great solution but I can't seem to get it working. Any help would be much appreciated.
Here is a link to a bootply with what I've got: http://www.bootply.com/15Ib1TGYeV
Appreciate the help.
My HTML:
<a id="suds"></a>
<a id="apoth"></a>
<a id="merch"></a>
<div class="container-fluid container-fullwidth" id="" style="">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<!-- <div class="container-fluid"> -->
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span>
<span class="fa fa-bars fa-lg"></span>
<!-- <span class="icon-bar"></span> <span class="icon-bar"></span> -->
</button> <a class="navbar-brand" href="#"><span class="fa fa-long-arrow-left"></span></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Suds
</li>
<li>Apothecary and Men's Grooming
</li>
<li>Gifts and Merchandise
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
<!-- </div> -->
<!-- /.container-fluid -->
</nav>
<section class="row no-gutter main">
<article class="merch-cat" id="suds">
<div class="col-lg-4 col-sm-6 col-xs-12">
<img src="http://placehold.it/600X400" class="img-responsive">
</div>
<div class="col-lg-4 col-sm-6 col-xs-12">
<img src="http://placehold.it/600X400" class="img-responsive">
</div>
<div class="col-lg-4 col-sm-6 col-xs-12">
<img src="http://placehold.it/600X400" class="img-responsive">
</div>
<div class="col-lg-4 col-sm-6 col-xs-12">
<img src="http://placehold.it/600X400" class="img-responsive">
</div>
<div class="col-lg-4 col-sm-6 col-xs-12">
<img src="http://placehold.it/600X400" class="img-responsive">
</div>
<div class="col-lg-4 col-sm-6 col-xs-12">
<img src="http://placehold.it/600X400" class="img-responsive">
</div>
</article>
<article class="merch-cat" id="apoth">
<div class="col-lg-4 col-sm-6 col-xs-12">
<img src="http://placehold.it/600X400" class="img-responsive">
</div>
<div class="col-lg-4 col-sm-6 col-xs-12">
<img src="http://placehold.it/600X400" class="img-responsive">
</div>
<div class="col-lg-4 col-sm-6 col-xs-12">
<img src="http://placehold.it/600X400" class="img-responsive">
</div>
</article>
<article class="merch-cat" id="merch">
<div class="col-lg-4 col-sm-6 col-xs-12">
<img src="http://placehold.it/600X400" class="img-responsive">
</div>
<div class="col-lg-4 col-sm-6 col-xs-12">
<img src="http://placehold.it/600X400" class="img-responsive">
</div>
<div class="col-lg-4 col-sm-6 col-xs-12">
<img src="http://placehold.it/600X400" class="img-responsive">
</div>
</article>
</section>
</div>
My CSS:
/* add a little bottom space under the images */
body {
padding-top: 0px;
}
.thumbnail {
margin-bottom:0;
}
.row.no-gutter {
margin-left: 0;
margin-right: 0;
}
.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) {
padding-right: 0;
padding-left: 0;
}
.container-fullwidth {
width: 100%;
}
/* make nav always collapsed */
#media (max-width: 2000px) {
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
}
/* nav opacity */
nav {
opacity: 0.5
}
/* scrolling */
a[ id= "suds" ]:target ~ #main article.merch-cat {
-webkit-transform: translateY( 0px);
transform: translateY( 0px );
}
a[ id= "apoth" ]:target ~ #main article.merch-cat {
-webkit-transform: translateY( -500px );
transform: translateY( -500px );
}
a[ id= "merch" ]:target ~ #main article.merch-cat {
-webkit-transform: translateY( -1000px );
transform: translateY( -1000px );
}
don't know if this will help you any.. but i used this on a profile of mine to scroll certain items
#-webkit-keyframes buzz-out {
10% {
-webkit-transform:translateX(3px) rotate(2deg);
transform:translateX(3px) rotate(2deg);
}
20% {
-webkit-transform:translateX(-3px) rotate(-2deg);
transform:translateX(-3px) rotate(-2deg);
}
30% {
-webkit-transform:translateX(3px) rotate(2deg);
transform:translateX(3px) rotate(2deg);
}
40% {
-webkit-transform:translateX(-3px) rotate(-2deg);
transform:translateX(-3px) rotate(-2deg);
}
50% {
-webkit-transform:translateX(2px) rotate(1deg);
transform:translateX(2px) rotate(1deg);
}
60% {
-webkit-transform:translateX(-2px) rotate(-1deg);
transform:translateX(-2px) rotate(-1deg);
}
70% {
-webkit-transform:translateX(2px) rotate(1deg);
transform:translateX(2px) rotate(1deg);
}
80% {
-webkit-transform:translateX(-2px) rotate(-1deg);
transform:translateX(-2px) rotate(-1deg);
}
90% {
-webkit-transform:translateX(1px) rotate(0);
transform:translateX(1px) rotate(0);
}
100% {
-webkit-transform:translateX(-1px) rotate(0);
transform:translateX(-1px) rotate(0);
}
}
#keyframes buzz-out {
10% {
-webkit-transform:translateX(3px) rotate(2deg);
-ms-transform:translateX(3px) rotate(2deg);
transform:translateX(3px) rotate(2deg);
}
20% {
-webkit-transform:translateX(-3px) rotate(-2deg);
-ms-transform:translateX(-3px) rotate(-2deg);
transform:translateX(-3px) rotate(-2deg);
}
30% {
-webkit-transform:translateX(3px) rotate(2deg);
-ms-transform:translateX(3px) rotate(2deg);
transform:translateX(3px) rotate(2deg);
}
40% {
-webkit-transform:translateX(-3px) rotate(-2deg);
-ms-transform:translateX(-3px) rotate(-2deg);
transform:translateX(-3px) rotate(-2deg);
}
50% {
-webkit-transform:translateX(2px) rotate(1deg);
-ms-transform:translateX(2px) rotate(1deg);
transform:translateX(2px) rotate(1deg);
}
60% {
-webkit-transform:translateX(-2px) rotate(-1deg);
-ms-transform:translateX(-2px) rotate(-1deg);
transform:translateX(-2px) rotate(-1deg);
}
70% {
-webkit-transform:translateX(2px) rotate(1deg);
-ms-transform:translateX(2px) rotate(1deg);
transform:translateX(2px) rotate(1deg);
}
80% {
-webkit-transform:translateX(-2px) rotate(-1deg);
-ms-transform:translateX(-2px) rotate(-1deg);
transform:translateX(-2px) rotate(-1deg);
}
90% {
-webkit-transform:translateX(1px) rotate(0);
-ms-transform:translateX(1px) rotate(0);
transform:translateX(1px) rotate(0);
}
100% {
-webkit-transform:translateX(-1px) rotate(0);
-ms-transform:translateX(-1px) rotate(0);
transform:translateX(-1px) rotate(0);
}
}
#misterManSam
#charset "UTF-8";
html {
background:url(https://googledrive.com/host/0B6ETuSl1xvFHZVY1TGlFb0dlLVE/back.png) no-repeat center 0,#000 url(https://googledrive.com/host/t0B6ETuSl1xvFHZVY1TGlFb0dlLVE/back.gif) left top;
}
img {
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
}
.mnmembers {
margin:50px -20px;
}
body {
font-family:Trebuchet MS,Arial,Helvetica;
text-align:center;
}
body,td {
color:#fff;
font-size:12px;
}
.friends_value img {
border:0;
}
td .clock {
font-size:23px;
}
.container_padding {
height:100%;
}
.gallery_image img {
margin:5px;
}
.gallery_image {
border:0;
}
.container_transparency {
height:100%;
width:100%;
}
.container {
height:100%;
background-color:transparent;
}
.container .heading {
color:#FF00CC;
text-shadow:2px 2px 2px rgba(255,255,255,0.2);
font-weight:bold;
font-family:Cabin Sketch,sans-serif;
font-size:20px;
}
.about_me .value {
color:#FF00CC;
font-size:15px;
}
.container table {
margin:15px;
}
.container table table {
border:0;
background:none;
}
#framepo {
text-align:center;
margin:0 150px;
}
#myvid {
margin:1000px 10px 0;
}
#stuff {
width:1194px;
overflow:hidden;
position:relative;
margin:1000px 0 0;
text-align:center;
}
.container table tr td.key {
background:#4a4057;
border-bottom:1px solid #443b50;
border-right:1px solid #383143;
}
.container table tr td.key,.container table tr td.friends_key {
padding:8px 8px 8px 20px;
}
.container table tr td.status_key,.container table tr td.blurb_key {
padding:3px 3px 3px 50px;
}
.wall_options textarea {
border:1px solid #0061aa;
background:rgba(0,0,0,0.25);
margin-top:20px 0 -20px 0;
}
a,a:link,a:active,a:visited,a:hover {
color:#fff;
}
.bottom_footer_wrapper {
bordet-top:#352f40 5px solid;
position:fixed;
bottom:0;
left:0;
width:100%;
z-index:9999;
}
#videocontainer {
z-index:1;
}
.bottom_footer_wrapper .bottom_footer {
background-color:#fff;
border-top:3px solid #fb15d3;
height:80px;
text-align:center;
}
.container a.desc-img img {
-moz-transform:rotate(-2deg);
-webkit-transform:rotate(-2deg);
}
div.gallery_content:hover {
bottom:0;
}
div.gallery_content .gallery_image {
font-size:12px;
width:175px;
text-align:center;
margin:0!important;
}
input[name='strip_links'] {
margin-bottom:170px;
}
input[type='submit'] {
background:none;
display:block;
margin-top:25px;
letter-spacing:-1px;
border-width:1px;
border-style:solid;
border-color:#ccc #444 #111;
border-color:rgba(255,255,255,0.7) rgba(0,0,0,0.5) rgba(0,0,0,0.7);
font:bold 21px1em Arial;
color:white;
padding:.48em 2em;
cursor:pointer;
text-shadow:rgba(0,0,0,0.45) 0 -1px 0;
-webkit-box-shadow:rgba(0,0,0,0.75) 0 0 3px;
-moz-box-shadow:rgba(0,0,0,0.75) 0 0 3px;
box-shadow:rgba(0,0,0,0.75) 0 0 3px;
-webkit-border-radius:7px;
-moz-border-radius:7px;
border-radius:7px;
background:transparent -webkit-gradient(linear,left top,left bottom,from(rgba(255,255,255,0.6)),color-stop(0.5,rgba(255,255,255,0.15)),color-stop(0.5,rgba(255,255,255,0.01)),to(transparent));
background:transparent -moz-linear-gradient(top,rgba(255,255,255,0.6),rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.01) 50%,transparent);
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorstr='#80FFFFFF',EndColorstr='#00FFFFFF');
-webkit-background-clip:padding-box;
}
input[type='submit']:hover {
border-top-color:rgba(255,255,255,0.65);
background:-webkit-gradient(linear,left top,left bottom,from(rgba(220,220,220,0.6)),color-stop(0.5,rgba(100,100,100,0.2)),color-stop(0.5,rgba(0,0,0,0.21)),to(rgba(0,0,0,0.20)));
background:-moz-linear-gradient(top,rgba(220,220,220,0.6),rgba(100,100,100,0.2) 50%,rgba(0,0,0,0.21) 50%,rgba(0,0,0,0.20));
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#99dcdcdc',EndColorStr='#33000000');
-webkit-background-clip:padding-box;
}
textarea {
color:#666;
font-size:14px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
padding:0 10px;
margin:15px 0;
border:#999 1px solid;
font-family:'Lucida Sans Unicode','Lucida Grande',sans-serif;
transition:all .25s ease-in-out;
-webkit-transition:all .25s ease-in-out;
-moz-transition:all .25s ease-in-out;
box-shadow:0 0 5px rgba(81,203,238,0);
-webkit-box-shadow:0 0 5px rgba(81,203,238,0);
-moz-box-shadow:0 0 5px rgba(81,203,238,0);
}
textarea#styleid:focus {
color:#000;
outline:none;
border:#35a5e5 1px solid;
font-family:'Lucida Sans Unicode','Lucida Grande',sans-serif;
box-shadow:0 0 5px rgba(81,203,238,1);
-webkit-box-shadow:0 0 5px rgba(81,203,238,1);
-moz-box-shadow:0 0 5px rgba(81,203,238,1);
}
.container .interests_body a img,.container img.thumbnail {
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
}
#schedule table {
margin-top:10px;
text-align:center;
border:1px solid #81729a;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
border-top-left-radius:5px;
-webkit-box-shadow:0 1px 3px 1px rgba(0,0,0,.05);
-moz-box-shadow:0 1px 3px 1px rgba(0,0,0,.05);
box-shadow:0 1px 3px 1px rgba(0,0,0,.05);
}
#schedule tr:last-child td {
border-bottom:none!important;
}
#schedule tr:first-child td {
border-top:none!important;
}
#schedule td:last-child {
border-right:none!important;
}
#schedule td {
border-top:2px solid #81729a;
border-bottom:1px solid #81729a;
border-right:1px solid #81729a;
padding:13px 8px;
}
#profile {
width:1202px;
left:50%;
position:absolute;
text-align:left;
margin-left:-601px;
}
#profile_schedule {
position:absolute;
top:2060px;
left:220px;
color:#000;
text-transform:uppercase;
z-index:0;
width:auto;
}
#profile_friends {
position:absolute;
left:0;
top:0;
color:#fff;
}
#profile_password_photo_galleries {
position:absolute;
top:2600px;
width:100%;
}
#profile_password_photo_galleries .heading {
font-size:20px;
}
#profile_schedule .heading {
color:#ff0084;
font-size:25px;
margin:0;
}
#profile_schedule > .profile_section_content .container {
padding:2px 0;
display:block;
}
#profile_schedule > .profile_section_content .container .label {
width:150px;
color:#d25581;
display:inline-block;
float:left;
}
#profile_main_photo,.flagCounter,#username_container,#gender_container,#body_type_container,#ethnicity_container,#cam_score_container,#hair_container,#eyes_container,#weight_container,#age_container,#country_container,#sexual_preference_container,#smoke_container,#drink_container,#occupation_container,#school_container,#favorite_food_container,#pets_container,#automobile_container,#tags_container,#profile_about_me .label,#profile_about_me > .heading {
display:none;
}
#profile_main_about_holder {
display:block;
}
#profile_photo_galleries {
position:absolute;
top:2900px;
width:100%;
}
#profile_friends {
position:absolute;
left:220px;
top:2300px;
color:#fff;
width:1000px;
font-size:12px;
}
#profile .profile_row:first-child {
display:none;
position:absolute;
left:412px;
top:420px;
color:#000!important;
width:400px;
}
#profile .profile_row:first-child a:link,#profile .profile_row:first-child a:active,#profile .profile_row:first-child a:visited,#profile .profile_row:first-child a:hover {
color:#f99dde;
}
#profile_interests_content {
display:none;
}
#profile_comments {
position:absolute;
top:2950px;
width:auto;
width:100%;
}
.wall_post {
background:RGBa(0,0,0,0.8);
padding:10px;
margin:0 0 20px;
}
#photo_gallery_previews {
}
#header_bar {
display:none;
}
#footer_bar {
display:none;
}
a.button {
position:absolute;
display:block;
}
a.button.amazon-link {
width:250px;
height:87px;
background:url(https://googledrive.com/host/0B6ETuSl1xvFHZVY1TGlFb0dlLVE/amazon.png);
top:750px;
left:620px;
}
a.button.twitter-link {
width:250px;
height:87px;
background:url(https://googledrive.com/host/0B6ETuSl1xvFHZVY1TGlFb0dlLVE/twitter.png);
top:750px;
left:50px;
}
a.button.offtip-link {
width:250px;
height:89px;
background:url(https://googledrive.com/host/0B6ETuSl1xvFHZVY1TGlFb0dlLVE/offtip.png);
top:750px;
left:340px;
}
/* Gallery */
.photo_gallery_preview {
color:#fff;
width:160px;
}
.photo_gallery_preview > a {
-webkit-transition:all .5s ease;
-moz-transition:all .5s ease;
-o-transition:all .5s ease;
transition:all .5s ease;
}
.photo_gallery_preview > a:hover {
opacity:.7;
-moz-transform:rotate(-10deg);
-webkit-transform:rotate(-10deg);
}
.photo_gallery_preview .photo_gallery_count {
font-size:14px;
}
.photo_gallery_preview a,.photo_gallery_preview a:link,.photo_gallery_preview a:active,.photo_gallery_preview a:hover,.photo_gallery_preview a:visited {
color:#fff;
text-decoration:none;
white-space:nowrap;
}
#buttons.resize {
width:10%;
/* you can use % */
height:auto;
}
/* Nav and target */
#about_me_target {
position:absolute;
top:1000px;
}
ul.nav-profile {
background:#000000;
padding:20px;
-webkit-border-radius:30px;
-moz-webkit-border-radius:20px;
-ms-webkit-border-radius:20px;
-o-webkit-border-radius:20px;
webkit-border-radius:20px;
position:absolute;
top:630px;
left:480px;
width:660px;
opacity:.8;
filter:alpha(opacity=80);
}
ul.nav-profile li {
float:left;
margin-right:35px;
list-style:none;
}
ul.nav-profile li a,ul.nav-profile li a:link,ul.nav-profile li a:visited,ul.nav-profile li a:active,ul.nav-profile li a:hover {
color:#fff;
font-weight:bold;
font-size:22px;
-webkit-transition:all .5s ease;
-moz-transition:all .5s ease;
-o-transition:all .5s ease;
transition:all .5s ease;
text-decoration:none;
}
ul.nav-profile li a:hover {
color:#8B008B;
}
.frame {
width:920px;
height:540px;
overflow:auto;
background:#e5e5e5;
position:relative;
}
.frame-border {
width:920px;
height:540px;
background:#e5e5e5;
padding:10px;
border-radius:20px;
-moz-border-radius:12px;
-webkit-border-radius:20px;
-o-border-radius:12px;
margin:0 125px;
}
.firstvid {
margin-right:20px;
}
div.hover_icon_container {
width:430px;
height:107px;
position:relative;
float:left;
margin-bottom:10px;
}
div.hover_icon_container a.hover_icon {
display:none;
width:430px;
height:107px;
position:absolute;
top:0;
left:0;
}
div.hover_icon_container:hover a.hover_icon {
display:block;
}
.frame::-webkit-scrollbar {
-webkit-appearance:none;
width:12px;
height:12px;
}
.frame::-webkit-scrollbar-thumb {
border-radius:8px;
border:2px solid white;
background-color:#C71585;
}
div.gif1 {
position:absolute;
left:140px;
top:472px;
}
div.gif2 {
position:absolute;
left:310px;
top:472px;
}
div.gif3 {
position:absolute;
left:480px;
top:472px;
}
div.gif4 {
position:absolute;
left:650px;
top:472px;
}
#blackBar {
position:fixed;
top:0;
left:0;
width:100%;
height:60px;
background-color:black;
}
#-webkit-keyframes buzz-out {
10% {
-webkit-transform:translateX(3px) rotate(2deg);
transform:translateX(3px) rotate(2deg);
}
20% {
-webkit-transform:translateX(-3px) rotate(-2deg);
transform:translateX(-3px) rotate(-2deg);
}
30% {
-webkit-transform:translateX(3px) rotate(2deg);
transform:translateX(3px) rotate(2deg);
}
40% {
-webkit-transform:translateX(-3px) rotate(-2deg);
transform:translateX(-3px) rotate(-2deg);
}
50% {
-webkit-transform:translateX(2px) rotate(1deg);
transform:translateX(2px) rotate(1deg);
}
60% {
-webkit-transform:translateX(-2px) rotate(-1deg);
transform:translateX(-2px) rotate(-1deg);
}
70% {
-webkit-transform:translateX(2px) rotate(1deg);
transform:translateX(2px) rotate(1deg);
}
80% {
-webkit-transform:translateX(-2px) rotate(-1deg);
transform:translateX(-2px) rotate(-1deg);
}
90% {
-webkit-transform:translateX(1px) rotate(0);
transform:translateX(1px) rotate(0);
}
100% {
-webkit-transform:translateX(-1px) rotate(0);
transform:translateX(-1px) rotate(0);
}
}
#keyframes buzz-out {
10% {
-webkit-transform:translateX(3px) rotate(2deg);
-ms-transform:translateX(3px) rotate(2deg);
transform:translateX(3px) rotate(2deg);
}
20% {
-webkit-transform:translateX(-3px) rotate(-2deg);
-ms-transform:translateX(-3px) rotate(-2deg);
transform:translateX(-3px) rotate(-2deg);
}
30% {
-webkit-transform:translateX(3px) rotate(2deg);
-ms-transform:translateX(3px) rotate(2deg);
transform:translateX(3px) rotate(2deg);
}
40% {
-webkit-transform:translateX(-3px) rotate(-2deg);
-ms-transform:translateX(-3px) rotate(-2deg);
transform:translateX(-3px) rotate(-2deg);
}
50% {
-webkit-transform:translateX(2px) rotate(1deg);
-ms-transform:translateX(2px) rotate(1deg);
transform:translateX(2px) rotate(1deg);
}
60% {
-webkit-transform:translateX(-2px) rotate(-1deg);
-ms-transform:translateX(-2px) rotate(-1deg);
transform:translateX(-2px) rotate(-1deg);
}
70% {
-webkit-transform:translateX(2px) rotate(1deg);
-ms-transform:translateX(2px) rotate(1deg);
transform:translateX(2px) rotate(1deg);
}
80% {
-webkit-transform:translateX(-2px) rotate(-1deg);
-ms-transform:translateX(-2px) rotate(-1deg);
transform:translateX(-2px) rotate(-1deg);
}
90% {
-webkit-transform:translateX(1px) rotate(0);
-ms-transform:translateX(1px) rotate(0);
transform:translateX(1px) rotate(0);
}
100% {
-webkit-transform:translateX(-1px) rotate(0);
-ms-transform:translateX(-1px) rotate(0);
transform:translateX(-1px) rotate(0);
}
}
.button {
display:inline-block;
-webkit-transform:translateZ(0);
-ms-transform:translateZ(0);
transform:translateZ(0);
box-shadow:0 0 1px rgba(0,0,0,0);
}
.button:hover {
-webkit-animation-name:buzz-out;
animation-name:buzz-out;
-webkit-animation-duration:.75s;
animation-duration:.75s;
-webkit-animation-timing-function:linear;
animation-timing-function:linear;
-webkit-animation-iteration-count:1;
animation-iteration-count:1;
}
.framen {
width:600px;
height:200px;
overflow:auto;
background:#000;
border-radius:20px;
position:relative;
margin:70px 20px 0;
padding:10px;
}
.frame-bordern {
width:920px;
height:300px;
background:url(https://googledrive.com/host/0B6ETuSl1xvFHZVY1TGlFb0dlLVE/about.png);
padding:10px;
border-radius:20px;
-moz-border-radius:12px;
-webkit-border-radius:20px;
-o-border-radius:12px;
margin:0 125px;
}
.framen::-webkit-scrollbar {
-webkit-appearance:none;
width:12px;
height:12px;
}
.framen::-webkit-scrollbar-thumb {
border-radius:8px;
background-color:#C71585;
}
#profile_schedule {
display:none;
}
#new_comment {
display:none;
}
a.button.insta-link {
width:250px;
height:85px;
background:url(https://5a2e1bf9a2ce6e1087dbd9512e595cd127bfe686.googledrive.com/host/0B6ETuSl1xvFHZVY1TGlFb0dlLVE/instagram.png);
top:750px;
left:900px;
}
.design a {
text-decoration:none;
}
.design h1 {
font-size:14px;
font-family:"Franklin Gothic Medium","Franklin Gothic","ITC Franklin Gothic",Arial,sans-serif;
}