I want make a menu like the image but I don't know how to cut the two divs and make it clickable.
I have tried with svg and borders on divs but I can't get the divs nor svg together because the "outline" still a rectangle!
the image example its on this link:
http://postimg.org/image/ffp6g83fd/537cb837/
I only can make this :
********| *****
******* | ******
****** | *******
***** |********
and I want :
******** *****
******* ******
****** *******
***** ********
and make them clickable
this was my result based on Hugo Marabutt Nogueira answer
http://jsfiddle.net/L7PL4/
Here's one way to do it without too much extra cruft. This uses borders and some css transforms to make the angles.
JSFiddle
CSS
* {
padding: 0;
margin: 0;
}
.container {
width: 100%;
height: 50px;
}
.left,
.right {
float: left;
}
.left span,
.right span {
position: absolute;
line-height: 50px; // equal to height of element
}
.left {
width: 25%; // change as needed
border-bottom: 50px solid blue;
border-right: 50px solid transparent;
-webkit-transform: rotateX(180deg);
}
.left span {
width: 100%;
text-align: center;
-webkit-transform: rotateX(-180deg); // opposite of skew
}
.right {
width: 25%;
border-bottom: 50px solid green;
border-right: 50px solid transparent;
-webkit-transform: rotate(180deg) rotateX(180deg);
}
.right span {
width: 100%;
text-align: center;
-webkit-transform: rotate(-180deg) rotateX(-180deg);
}
Just make sure to unskew the text by using the opposite transforms on them. You'll also have to use all the appropriate vendor prefixing for transforms.
You can use CSS3 Transitions to achieve that shape and then bind a js click to them.
Like this :
http://cdpn.io/stHdg
.skew{
background-color: #333;
width:150px;
height:75px;
float:left;
position:relative;
margin-left:100px;
margin-top:50px;
cursor:pointer;
}
.a:before{
content:"";
position:absolute;
background: #333;
top:0;
left:-25px;
bottom: 0;
width: 50px;
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-ms-transform: skew(-20deg);
transform: skew(-20deg);
}
.b:after{
content:"";
position:absolute;
background: #333;
top:0;
right:-25px;
bottom: 0;
width: 50px;
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-ms-transform: skew(-20deg);
transform: skew(-20deg);
}
You can use a negative margin to make the element overlap. Example:
margin-right: -5px;
Related
Hi i have this code but i need to add some smooth scroll animation to it to make it look nice ,but i dont know how to code or write a line can someone help me where to write the code to smooth scroll to the element and it makes the user feel good seeing other stuff while it auto scrolls to the element
'''
<a href="#413695047492935501"><p align="center"> <button class="btn btn1">Download</button>
</p></a>
<style>
body{
margin: 0;
padding: 0;
}
.middle{
position: absolute;
top: 20%;
left: 20%;
transform: translate(-50%,-50%);
text-align: center;
}
.btn1{
background: #47B2FF;
border: 2px solid #000000;
font-family: "montserrat",sans-serif;
text-transform: uppercase;
padding: 10px 60px;
min-width: 300px;
cursor: pointer;
transition: color 0.4s linear;
position: relative;
}
.btn1:hover{
color: #fff;
}
.btn1::before{
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #000;
z-index: -1;
transition: transform 0.5s;
transform-origin: 0 0;
transition-timing-function: cubic-bezier(0.5,1.6,0.4,0.7);
}
.btn1::before{
transform: scaleX(0);
}
.btn2::before{
transform: scaleY(0);
}
.btn1:hover::before{
transform: scaleX(1);
}
.btn2:hover::before{
transform: scaleY(1);
}
</style>
<script>$('#413695047492935501').onclick=function(){$('html, body').animate({scrollTop:
$("413695047492935501").offset().top}, 2000);}</script>'''
This might be what you are looking for
html {
scroll-behavior: smooth;
}
Do a simple google search before asking a question here...
i tried different ways, but i can't find any way to do something like this through HTML, CSS.
At the moment I have:
HTML:
<div id="intro-slogan">
<div id="diagonal"></div>
</div>
CSS:
#intro-slogan{
display: inline-block;
margin-top: 5em;
clear: both;
height: 100%;
}
#diagonal{
background: red;
width: 18em;
height: 1px;
transform: rotate(-60deg);
}
I want something like this:
fiddle: https://jsfiddle.net/avakqez9/1/
<div class="one">
<h1>The Jocky</h1>
</div>
<div class="two">
<h1>of Mocky</h1>
</div>
CSS
div{
vertical-align: middle;
display: inline-block;
}
.one{
overflow: hidden;
margin-top: -1px;
transform: rotate(10deg);
border-right: 1px solid #000;
}
.one h1 {
margin-right: -20px;
transform: rotate(-10deg);
}
.two h1{
color: orange;
margin: 40px 0 0 -10px;
}
You could try wrapping each one of the original divs in a container, skewing the containers with the transform CSS3 property (check skewX and skewY) and skew the content div in the opposite direction (this way you keep the content non-skewed).
After that, perhaps overflow:hidden and some toying around with margins/paddings could finally do the trick.
Try using position:absolute , z-Index , border properties , using span element as descendant of #intro-slogan to position text "of giving" below text "the gift"
#intro-slogan {
display: inline-block;
margin-top: 5em;
clear: both;
height: 100%;
z-Index:0;
font-size:24px;
}
#intro-slogan span {
position:absolute;
top:145px;
left:74px;
}
#diagonal {
background: red;
width: 18em;
height: 1px;
transform: rotate(-60deg);
position:absolute;
left:-140px;
z-Index:10;
border:2px solid #fff;
}
<div id="intro-slogan">
The gift<div id="diagonal"></div><span>of giving</span>
</div>
For those who still need, i made it this way:
HTML:
<div class='centerMe'>
<div class='skew1'>
<div class='text part-1'>
<span>the Gift</span>
</div>
</div>
<div class='skew2'>
<div class='text part-2'>
<span>of Giving</span>
</div>
</div>
</div>
CSS:
.skew1,
.skew2{
overflow: hidden;
height: 300px;
cursor: pointer;
position: relative;
width: 27em;
float: left;
transform: skew(-20deg);
-o-transform: skew(-20deg);
-ms-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-webkit-transform: skew(-20deg);
}
.text{
top: 50%;
color: #fff;
right: 60px;
font-size: 2em;
position: absolute;
display: inline-block;
transform: skew(20deg);
-o-transform: skew(20deg);
-ms-transform: skew(20deg);
-moz-transform: skew(20deg);
-webkit-transform: skew(20deg);
}
.skew2:before{
content:'';
top: 55%;
left: 0px;
width: 2px;
height: 100px;
position: absolute;
background-color: #fff;
transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
.centerMe{
top: 50%;
left: 50%;
min-width: 1200px;
position: absolute;
transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
}
I know there are few way to positon a div center vertically and horizontal using css. But for old phone support, I have to do it with js.
http://jsfiddle.net/ncsy9khf/1/
div{
width:50px;
height:50px;
background:orange;
position:relative;
margin: 0 auto;
display:block;
}
How do I do the calculation to know what value of my margin top to make the box center center?
This is my favorite way:
position:relative;
top: 50%;
transform: translateY(-50%);
left: 50%;
transform: translateX(-50%);
This 5 lines can vertically and horizontally almost anything
Fiddle
I learned this method from this article
Support tables here
You can expect 95% of your users have this work perfectly
More browser friendly way:
position:relative;
top: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
left: 50%;
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
Friendly Fiddle
Just use plain CSS:
.parent {
position: relative;
width: 160px;
height: 160px;
background: #eee;
}
.centered {
position: absolute;
width: 50px;
height: 50px;
background-color: #FF9800;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
<div class="parent">
<div class="centered"></div>
</div>
The parent element must have position:relative; (In which you are planning to center the div)
Also there's no need to add display:block; to div elements - they are block elements by default
I must admit I'm less than a genius in CSS... To practice, I'm creating an animation that simulates a beer glass.
For the moment, looking at some examples, I've achieved the desired animation:
http://jsfiddle.net/yfb1fo8c/1/
And the shape I want:
#liquid {
background: black;
border-bottom: 500px solid #e39700;
border-left: 80px solid transparent;
border-right: 80px solid transparent;
width: 300px;
color: #fff8eb;
position: absolute;
clip:auto;
overflow:hidden;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
}
But when I try to merge both ideas my shape totally crashes, or is not animated: http://jsfiddle.net/ogpqj2kr/2/
Any ideas?
Is this what you want : http://jsfiddle.net/Paf_Sebastien/cqa7rfu7/ ?
(Sorry I'm not giving more details as I had to change a lot of stuff. Basically, your 'cup' had no height so you didn't see the waves. I did more changes anyway.)
Here's your new CSS :
body {
padding: 0;
margin: 0 10px;
background: black;
}
#foam {
margin-top: 20px;
background: white;
width: 460px;
height: 100px;
z-index:1;
}
#liquid {
background: #000;
width: 460px; height: 500px;
position: relative;
clip:auto;
overflow:hidden;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
z-index:2;
background-image:
-webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(0,50,150)),
color-stop(0.50, rgb(0,150,255))
);
}
#liquid:before {
content: '';
position: absolute;
top: 0; left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 500px 80px 0 0;
border-color: #000000 transparent transparent transparent;
z-index: 10;
}
#liquid:after {
content: '';
position: absolute;
top: 0; right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 80px 500px 0;
border-color: transparent #000000 transparent transparent;
z-index: 10;
}
.wave{
bottom:0;
background:#fff;
display:inline-block;
height:10%;
width:10px;
position:absolute;
-webkit-animation-name: dostuff;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-transition-timing-function: ease-in-out;
z-index:3;
}
#-webkit-keyframes dostuff{
0%, 100% {
height:10%;
}
50% {
height:20%;
}
}
the problem are those borders that you are using, it push the content and that's why you cant see your animation, is not that is broken it's that you can only see the border.
I recommend you to use a wrapper, find a proper technique to shape that wrapper and then insert inside your liquid template.
I take your code and update to this example. First i rotate the wrapper into 45deg using transform: rotate(45deg); and then i rotate the element in the opposite angle: transform: rotate(-45deg); for compensate transformation on the wrapper.
You can achieve this behavior in different ways but try to use transform or border-radius, even box-shadow, any element that doesn't push the inner
content
In this presentation you can find several shapes that you can achieve using border-radius and combine them with transforms like i did rotating the wrapper and doing the opposite with the inner element
Update:
Fixed working example, wasn't importing jQuery correctly
What I have so far:
http://jsfiddle.net/2Zrx7/2/
.events{
height:100px;
position: relative;
}
.tt_username{
position: absolute;
top:0px;
height: 100%;
width: 30px;
background: #ccc;
text-align: center;
}
.tt_username p{
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
background: #ff0000;
font-size: 16px;
}
I need to center the text inside the grey div, this div's height is consistent, but the text is generated via ajax, for this reason I believe transform origin is not going to fix it. Would like a CSS solution, but welcome js as well.
Using display: table, combined with display: table-cell as well as vertical-align: middle:
Living demo: http://jsfiddle.net/2Zrx7/3/
.events{
height:100px;
position: relative;
display: table; /*added*/
}
.tt_username{
/* position: absolute;*/
top:0px;
height: 100%;
width: 30px;
background: #ccc;
text-align: center;
display:table-cell; /*added*/
vertical-align:middle; /*added*/
}
.tt_username p{
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
background: #ff0000;
font-size: 16px;
}