I need to make a div that looks like this:
With text in the middle in css. I tried looking at transforms and other 3d stuff, but I couldn't figure it out, especially without ruining the text.
You can use a skewed Y pseudo element as a background of the element. This won't affect the content :
div {
position: relative;
display: inline-block;
padding: 20px 50px;
overflow: hidden;
}
div:before {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: #FFD505;
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: skewY(5deg);
-ms-transform: skewY(5deg);
transform: skewY(5deg);
z-index: -1;
border-radius: 10px 10px 0 0;
}
<div>Some text</div>
The div has overflow:hidden so that the overflowing parts of the pseudo-element are hidden.
The pseudo element has a negative z-index so it stacks behind the content of the div
The transform-origin is set to 0 0 so that top left of the skewed pseudo element doesn't move.
you could use a skew'ed pseudo element for this, which ensures the text won't be skewd as well:
.wrap {
height: 100px;
width: 400px;
position: relative;
overflow: hidden;
padding-top: 30%;
}
.wrap:before {
content: "";
position: absolute;
border-radius: 5px;
height: 100%;
width: 100%;
left: 0;
top: 20%;
background: tomato;
transform: skewY(5deg);
z-index: -2;
}
<div class="wrap">hello
</div>
Related
I have 2 divs: the .container and its child .element.
The container is centered on the page, both elements have position: absolute and have vw and vh for width and height.
The difference between them is that the parent element has 25vh for height and 25vw for width, however the child element has the opposite: 25vh for the width and 25vw for height. This means that the width of one is equivalent to the height of the other.
Then, I used transform: rotate(90deg) to rotate the child div. Now they look the same.
I want to move only the child element so that it dynamically fits into the parent element. But I'm not getting it done.
I've tried to use positioning properties, transform-origin, translate and so on with percentage or vw and vh units, but nothing is working.
How to fit this div into the parent div while remaining that way on any screen size?
body {
background-color: #333;
}
.container {
background-color: #000;
position: absolute;
height: 25vh;
width: 25vw;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.element {
position: absolute;
background-color: #abc;
transform: rotate(90deg);
height: 25vw;
width: 25vh;
}
<div class="container">
<div class="element"></div>
</div>
You need to consider transform-origin and some translation too
body {
background-color: #333;
}
.container {
background-color: #000;
position: absolute;
height: 25vh;
width: 25vw;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.element {
position: absolute;
background-color: #abc;
height: 25vw;
width: 25vh;
transform: translateY(-100%) rotate(90deg);
transform-origin: bottom left;
}
<div class="container">
<div class="element"></div>
</div>
This question already has answers here:
Why magin:auto is not enough to center position absolute or fixed?
(3 answers)
Center a position:fixed element
(23 answers)
Closed 2 years ago.
Here is the CSS:
#indicator {
position: fixed;
top: 40%;
width: 150px;
margin: 0 auto;
z-index: 1000;
padding: 2px;
background: #fff;
}
Whenever I apply it, the content stays hard left, not centered. I have tried it with block elements (such as P and H1), and inline elements (such as span).
When I check the HTML inspector I can see that the rules are being applied as expected, and none are being overridden.
By default, margin auto wont work with fixed elements. To make the margin auto value work with fixed elements, add left:0 and right:0 to your CSS values.
Attached a code snippet for your reference.
#indicator {
position: fixed;
top: 40%;
left: 0;
right: 0;
width: 150px;
margin: 0 auto;
z-index: 1000;
padding: 2px;
background: red;
}
<div id="indicator">
</div>
Because margin:auto only works with position:relative.
To make a fixed div to work with margin:auto, add left: 0; right:0; to your div.
#indicator_relative {
position: relative;
margin: 0 auto;
background: #0f0;
width: 10px;
height: 10px;
}
#indicator_fixed {
position: fixed;
margin: 0 auto;
background: #f00;
width: 10px;
height: 10px;
}
#indicator_fixed_centered {
position: fixed;
margin: 0 auto;
background: #00f;
width: 10px;
height: 10px;
left:0;
right:0;
}
<div id='indicator_fixed'></div>
<div id='indicator_relative'></div>
<div id='indicator_fixed_centered'></div>
To center fixed/absolute position elements. Add left: 50%; margin-left: (element width/ 2 * -1)px;
#indicator {
position: fixed;
top: 40%;
width: 150px;
margin: 0 auto;
z-index: 1000;
padding: 2px;
background: #fff;
left: 50%;
margin-left: -75px; /* (element width / 2 * -1) */
}
plus make sure that the parent element where you want to center this, has position: relative; so it wont just fly around.
top 40%; horizontal center;
#indicator {
position: fixed;
top: 40%;
left: 50%;
transform: translateX(-50%);
}
<div id="indicator">Hello World</div>
or center screen
#indicator {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div id="indicator">Hello World</div>
In order to translate an element completely out of view, I used transform: translate(0, -100%);. Its children however, if you resize the window compressing its height far enough, will gradually reappear. I have no clue why they do this, and I'd like someone to shed light on the reason why this happens. Here's the fiddle.
HTML
<body>
<div id="background">
<div id="circle1"></div>
<div id="circle2"></div>
</div>
</body>
CSS
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#background {
background-color: red;
height: 100%;
width: 100%;
position: fixed;
transform: translate(0, -100%);
}
#circle1 {
background-color: yellow;
height: 500px;
width: 500px;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
position: fixed;
border-radius: 50%;
z-index: 0;
}
#circle2 {
background-color: aqua;
height: 400px;
width: 400px;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
position: fixed;
border-radius: 50%;
z-index: 1;
}
you have fixed heights for your cirecles (500px / 400px). When #background's height becomes less than that by resizing the window, the circles would overflow #background vertically.
The translatemovement by 100% refers to #background, so you still see the part of the circles that would overflow #background without the translate setting.
I have this:
.ce_text.forward {
position: relative;
overflow: hidden;
padding: 20px;
background-color: #F8F8F8;
color: #2d353c;
}
.ce_text.forward p {
position: relative;
}
.ce_text.forward .fill_bottom {
width: 500px;
height: 500px;
bottom: 0;
left: -865px;
position: absolute;
margin: auto;
background-color: #ecedee;
top: 0px;
right: 0;
transition: left 0.3s linear 0s;
transform: rotate(45deg);
}
.ce_text.forward:hover .fill_bottom {
left: 0;
}
<div class="ce_text forward block"><div class="fill_bottom"></div>
<p><strong>Headline</strong>Test Test test test<span>Lesen Sie mehr</span></p>
</div>
It works in chrome but not in firefox, can some one help me with the css?
Fiddle
The problem in Firefox seems to be caused by the usage of margin: auto. I have completely re-built your example to eliminate this.
New and Improved
No fixed height. Height is controlled by a percentage (which can be modified) and a min-height.
No extra markup. The triangle is created with a pseudo element and rotated. The text is centered with its <a> wrapper.
Centered triangle. The triangle is centered at any height with bottom: 50% and a negative bottom margin of half its height.
No gaps - The triangle is large enough to eliminate any spacing in the corners. If you need it to be even larger, it can be as large as required; just keep the height to width ratio 1:1 and increase the size of the negative bottom margin.
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
h1 {
background: #333;
height: 40%;
min-height: 140px;
position: relative;
overflow: hidden;
z-index: 0;
}
h1 a {
display: block;
height: 100%;
position: absolute;
top: 50%;
margin-top: -0.56em;
left: 100px;
}
h1:before {
content:'';
display: block;
position: absolute;
bottom: 50%;
margin-bottom: -1000px;
left: -2000px;
height: 2000px;
width: 2000px;
background: #F00;
transform: rotate(45deg);
transition: left 0.3s;
z-index: -1;
}
h1:hover:before {
left: 0;
}
<h1><a>Text</a></h1>
Old Solution
Archived - fixed height option (no transform, should work back to IE8)
I have approached this differently:
The right triangle and the bar are made with pseudo elements and are positioned with percentages
z-index: -1 keeps the pseudo elements behind the text.
overflow: hidden prevents the scroll bar when the triangle is pushed outside.
* {
margin: 0;
padding: 0;
}
.headline {
height: 100px;
background: #333;
color: #FFF;
position: relative;
z-index: 2;
display: inline-block;
width: 100%;
height: 0;
padding: 30px 0 70px 50px;
overflow: hidden;
}
.headline:before {
width: 30%;
content:'';
display: block;
height: 100px;
background: #F00;
position: absolute;
top:0;
left: 0;
transition: all 0.3s linear 0s;
z-index: -1;
}
.headline:after {
content: '';
display: block;
border-bottom: solid 50px transparent;
border-top: solid 50px transparent;
border-left: solid 50px #F00;
height: 0;
width: 0;
left: 30%;
position: absolute;
top:0;
transition: all 0.3s linear 0s;
z-index: -1;
}
.headline:hover:before {
width: 100%;
}
.headline:hover:after {
left: 100%;
}
<h1 class="headline">Text</h1>
I am creating a "light box" sort of effect. Without using JavaScript, how can I make the light box resize according to the viewport size so that it always stays in the center of the viewport and occupy 80% of the width and height?
<div class="fullscreen-dim">
<div class="dialog">
<img src="http://placehold.it/300x200">
<a class="close-button" href="#">CLOSE</a>
</div>
</div>
.fullscreen-dim {
background-color: rgba(0, 0, 0, 0.7);
position: fixed;
top: 0; right: 0;
width: 100%;
height: 100%;
}
img {
width: 100%;
height: 100%; // how to respect aspect ratio??
}
.dialog { // dialog should auto-size just big enough to wrap image
padding: 20px; // to create a "border" around the image;
position: fixed;
background-color: red;
left: 50%; top: 50%;
transform: translateX(-50%) translateY(-50%);
width: 80%;
height: 80%;
}
a {
position: absolute;
bottom: 5px; right: 5px;
}
In this method http://jsfiddle.net/3Lohtes9/ , the dialog resizes but the image does not respect aspect ratio.
This problem can also be interpreted as one of the "grandparent div" questions on SO. How can I set the image size with respect to full-screendim and let dialog to auto-size to fit?
EDIT: Instead of enclosing the img in the dialog div, I can achieve a similar visual effect of having the border around the image and still have the image resize accordingly when viewport size changes. However, I have no way to place the close button now. Any advice?
Change .dialog height from 80% to auto. See fiddle
.fullscreen-dim {
background-color: rgba(0, 0, 0, 0.7);
position: fixed;
top: 0;
right: 0;
width: 100%;
height: 100%;
}
img {
width: 100%;
height: 100%;
}
.dialog {
padding: 20px;
// to create a"border" around the image;
position: fixed;
background-color: red;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
width: 80%;
height: auto;
}
a {
position: absolute;
bottom: 5px;
right: 5px;
}
edit:
try adding this if you want more control (like a min-height) or simply remove all height and width from .dialog:
width: auto;
max-width:80%;
height:auto;
max-height:80%;
min-height: 100px;
new fiddle
Using the information from this question, you can set the image to be aligned horizontally within the lightbox. Then by removing the height of the image, it will scale correctly with the aspect ratio.
The key CSS changes are here
img {
display: inline-block;
width: 100%;
vertical-align: middle;
}
/* This is a new element, see the question linked above. */
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.dialog {
padding: 20px; // to create a "border" around the image;
position: fixed;
background-color: red;
left: 50%; top: 50%;
transform: translateX(-50%) translateY(-50%);
width: 80%;
height: 80%;
white-space: nowrap;
text-align: center; margin: 1em 0;
}
And the HTML
<div class="fullscreen-dim">
<div class="dialog">
<span class="helper"></span>
<img src="http://placehold.it/300x200"/>
<a class="close-button" href="#">CLOSE</a>
</div>
</div>
See fiddle: http://jsfiddle.net/3Lohtes9/7/
Instead of all of this
.dialog { // dialog should auto-size just big enought to wrap image
padding: 20px; // to create a "border" around the image;
position: fixed;
background-color: red;
left: 50%; top: 50%;
transform: translateX(-50%) translateY(-50%);
width: 80%;
height: 80%;
}
try
.dialog { // dialog should auto-size just big enought to wrap image
padding: 20px; // to create a "border" around the image;
position: fixed;
background-color: red;
left: 10%; top: 10%;
right: 10%; bottom: 10%
}