I am trying to get following output (a large slash line between two numbers):
Following code works on Firefox and Chrome but doesn't work on Safari. Would there be any workaround for that?
Here's the code:
HTML:
<div class="wrap">
<div class="top">4</div>
<div class="bottom">15</div>
</div>
CSS:
.top {
display: block;
float: left;
font-size: 60px;
font-weight: 700;
}
.bottom {
display: block;
float: left;
font-size: 38px;
font-weight: 700;
margin-top: 70px;
position: relative;
width: 28px;
}
.bottom:before {
border-left: 1px solid;
content: "";
height: 66px;
position: absolute;
right: 0;
top: -35px;
transform: skew(-45deg);
transform-origin: left top 0;
width: 0;
}
JSFiddle Demo:
http://jsfiddle.net/pg4sxrc1/
Certain versions of Safari still require the use of the -webkit- prefix for transform and transform-origin, try adding the following definitions to your .bottom:before CSS:
-webkit-transform: skew(-45deg);
-webkit-transform-origin: left top 0;
jsFiddle Demo
Related
I am having some issues with absolute objects on a website. Z-index essentially won't work correctly. I may be being a little dumb?
Here is the website: http://www.mascots.ds-demo.co.uk/
The blue and yellow characters need to be behind the hero cta buttons 'learn more' and 'get a quote' however i cant get them to work with z-index.
CSS on characters:
.character-blue-float {
position: absolute;
float: right;
top: 7%;
left: -20%;
z-index: 1000;
-ms-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
transform: rotate(7deg);
}
.character-blue-float img {
width: auto;
max-width: 800px;
height: auto;
}
CSS on Buttons:
.home-hero-cta {
margin-top: 30px;
z-index: 2000;
}
.btn-outer-lrg {
padding: 10px 20px;
color: #08788c;
border: 2px solid #08788c;
border-radius: 5px;
font-size: 22px;
background-color: transparent;
margin-right: 10px;
font-family: 'Fredoka One', cursive;
}
apply below css to hero-home and check
.hero-home {
z-index: 1001;
position: relative;
}
it should work
Below is my html and css code. It is pretty simple. I want to show a square \F1FC on a red react.
.parent::before {
position: absolute;
content: '';
width: 40px;
height: 40px;
background-color: red;
border-radius: 10px 0px 0px 10px;
transform: perspective(5px) rotateY(-2deg);
z-index: -1;
}
p::before {
content: "\F1FC";
color: black;
margin-left: 15px;
}
<div class="parent">
<p></p>
</div>
This code works fine on chrome but doesn't work on safari. Half of the square is hidden by the p::before. Below is a screen shot on safari:
Below is the screenshot for chrome:
This is some kind of weird bug in Safari and pseudo elements. My solution for this issue was to counter the transform: rotateY(-2deg); on the parent pseudo element since it was causing the issue.
Add display: block; and transform: rotateY(1deg); to p::before. The small rotation doesn't seem to affect how the square looks and it fixes it for me in Safari.
.parent::before {
position: absolute;
content: '';
width: 40px;
height: 40px;
background-color: red;
border-radius: 10px 0px 0px 10px;
transform: perspective(5px) rotateY(-2deg);
z-index: -1;
}
p::before {
content: "\F1FC";
color: black;
display: block;
margin-left: 15px;
transform: rotateY(1deg);
}
<div class="parent">
<p></p>
</div>
How to create the offer div with a background color using html and css only ?
What I'm asking is width and height of the offer div should be same as in picture.
I created this using html and CSS. However part of div is hidden in my solution because offer div has a larger width and height.
Code I have written :
.offer-text-wrapper {
display: inline-block;
position: absolute;
top: -39px;
left: -36px;
color: #FFF;
height: 72px;
width: 75px;
background: #f44336;
transform: rotate(-43deg);
}
.offer-text {
-moz-transform: rotate(-40deg);
-o-transform: rotate(-40deg);
display: inline-block;
margin-left: 21px;
line-height: 124px;
}
<div class="offer-text-wrapper">
<span class="offer-text"> Offer </span>
</div>
Edit :
Because width and height of offer-text-wrapper is larger, I'm having below issue when I added that to the bootstrap grid.
Have a look at the code snippet, it's basically just changing dimensions and position until you're happy with it.
Is this what you mean?
.offer-container { /* added container to show effect better */
width: 200px;
height: 100px;
overflow: hidden;
position: relative;
border: 1px solid #ccc;
border-radius: 12px;
margin: 40px;
}
.offer-text-wrapper {
display: inline-block;
position: absolute;
top: -29px;
left: -40px;
color: #FFF;
height: 72px;
width: 95px;
background: #f44336;
transform: rotate(-45deg);
text-align: center;
}
.offer-text {
display: inline-block;
line-height: 114px;
}
<div class="offer-container">
<div class="offer-text-wrapper">
<span class="offer-text">Offer</span>
</div>
</div>
I am creating a site with some nested divs. The navigation bar has been creating an awful horizontal scrollbar. So far I've tried defining the widths of the divs with no luck. I also tried setting a max-width, but that didn't work either.
While I know I could hide the x-overflow, that just seems like a bandaid fix that could cause more problems later on.
Here's a picture of the pesky scrollbar/layout - http://i.imgur.com/i7V3pxf.png
When I inspect element in chrome, it seems that the life_link might be the issue, but I just can't find what's causing it. ):
HTML
<div id='nav'>
<div id='button_wrapper_r'>
<span class='navlink'>characters</span>
<span class='navlink'>guidebook</span>
<span class='navlink'>faq</span>
</div>
<div id='life_link'>LIFE</div>
<div id='button_wrapper_l'>
<span class='navlink'>modbox</span>
<span class='navlink'>packs</span>
<span class='navlink'>members</span>
</div>
</div>
CSS
#nav {
background-image:url("/images/nav_bar.png");
width: 1027px;
height: 151px;
margin-top: 335px;
margin-left: auto;
margin-right: auto;
position: relative;
z-index: 2;
max-width: 1027px;
}
#nav a {
color: #bd916f;
text-transform: uppercase;
letter-spacing: 2px;
font-family: Amaranth;
text-decoration: none;
font-size: 20px;
margin: 20px;
}
#nav a:hover {
color: #eff9ce;
}
#button_wrapper_r {
position: relative;
top: 54px;
left: 26px;
z-index: 3;
}
#button_wrapper_l {
position: relative;
top: -37px;
left: 620px;
z-index: 3;
}
#life_link {
position: relative;
top: 8px;
left: 460px;
z-index: 3;
}
#life_link a {
font-family: 'Cinzel Decorative', cursive;
font-size: 50px;
}
.navlink {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
overflow: hidden;
}
.navlink:before {
content: "";
position: absolute;
z-index: -1;
left: 50%;
right: 50%;
bottom: 0;
background: #9bd4bb;
height: 2px;
-webkit-transition-property: left, right;
transition-property: left, right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.navlink:hover:before, .navlink:focus:before, .navlink:active:before {
left: 0;
right: 0;
}
#button_wrapper_l got the same width as your #nav. But then you moving it to the right by position: relative; left: 620px; and get invisible part of that getting through the right side of the #nav element, extending the width of the page.
UPD
I made a JSFiddle using another way to construct your menu – without any relative positions: https://jsfiddle.net/LpbLmmvv/
But there is small problem with width. It doesn't fit your 1027px.
You'd better use flex instead (https://css-tricks.com/snippets/css/a-guide-to-flexbox/). But keep in mind it's browser support – http://caniuse.com/#search=flex
CSS for elements, fiddle
#scroll_jump
{
margin-top: 310px;
position: fixed;
margin-left: 20px;
display: none;
}
#jump_link
{
display: block;
width: 70px;
height: 20px;
background: #BBDAF7;
color:white;
font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
font-size: 16px;
font-weight: bold;
text-decoration: none;
text-align: center;
padding-left: -1px;
}
#jump_link:after
{
content: '';
position: absolute;
width: 0;
height: 0;
border: 35px solid;
border-bottom-color:#BBDAF7;
border-top-color:white;
border-left-color:#ffffff ;
border-right-color: #ffffff;
top: 0;
margin-top: -70px;
left: 49%;
margin-left: -35px; /* adjust for border width */
}
Correct display: Chrome, Firefox, IE.
How it looks in Opera:
P.S. So far Opera created much more troubles, than IE!!!
Instead of this:
#jump_link:after{
left: 49%;
margin-left: -35px;
}
all you need is this:
#jump_link:after{
left: 0;
}
and then it works just fine in grand ol' Opry (as well as the other browsers). :-)
It's about your :after pseudo-element. For 'left' you're using a percentage. Most browsers take this to mean a percentage of the main element, Opera will take this a percentage of the parent. Use pixels if you can for the left position (e.g. 35px).