I have some text that I've rotated -90deg. Does anyone know a way to get it to anchor to the ceiling of the parent element?
So far I've been able to anchor only to the floor:
http://jsfiddle.net/tpm3f
HTML:
<div>
<h2>hello, world</h2>
</div>
CSS:
div { height: 300px; background: red; position: relative; }
h2 {
color: white;
margin: 0;
font-size: 2.5em;
-webkit-transform: rotate(-90deg);
-webkit-transform-origin: bottom left;
position: absolute;
left: 1.5em;
bottom: 0;
}
Changing bottom: 0 to top: 0 produces a weird result; the text is neither anchored to the ceiling by its left nor its right side.
Does anyone know a pure CSS way round this?
if you need the element locked to the top and the left corner have a look at something like
h2 {
color: white;
margin: 0;
font-size: 2.5em;
-webkit-transform: rotate(-90deg);
-webkit-transform-origin: top right;
position: absolute;
right: 100%;
top: 0;
white-space:nowrap;
}
http://jsfiddle.net/8gsuD/1/
Try:
h2 {
-webkit-transform-origin: top right;
top: 0;
}
Fiddle
Related
I am trying to position an element on a page so that it is always spaced away from other control elements on the page. I want this element to be positioned anywhere on the page, depending on other control elements on the page, what action the user has taken etc. These are the eight valid positions:
TOP_CENTER
TOP_LEFT
TOP_RIGHT
LEFT_CENTER
RIGHT_CENTER
BOTTOM_CENTER
BOTTOM_LEFT
BOTTOM_RIGHT
What I have so far are 3 component elements: 1) a DIV container, 2) an image which should always be at the top of the DIV container, 3) some text which should always be at the bottom of the DIV container. My CSS looks as follows:
#floatingElement {
left: 60px;
top: 11%;
width: 25%;
height: 25%;
position: absolute;
pointer-events: none;
z-index: 1;
}
#floatingElement img {
display: block;
margin: auto;
max-width: 95%;
max-height: 100%;
}
#floatingElement div {
text-align: center;
background: rgba(255,255,255,0.5);
border-radius: 5%;
box-shadow: 3px 3px 2px #888888;
font-size: 2vmax;
}
The above works perfectly whenever the element is positioned "TOP" or "CENTER". However, "BOTTOM" positioning is causing problems, I think because the container DIV is somehow not taking into account its height based on the amount of text in the 3rd (text DIV) element.
How can I make it so that the element can always align to the bottom of the page whenever a "BOTTOM" position is chosen, so that the container DIV includes the height of the text DIV (which can vary depending on the amount of text in that DIV), similar to this image:
The black border is my window, the red box is my image and the green box is the text DIV. Both the red and green boxes are inside my container DIV.
Upon being altered using bottom, the scenario you want is not working as expected because you specified the height of #floatingElement to be fixed (in your case, 25%). Having a fixed value relative to the container and not considering the height of the text div, the floating element's position will definitely seem off when altered using bottom. This is because bottom places the element based on the bottom-most pixel of your element's height, which in your case may be smaller than enough to cover your whole text div's and image's height. To see what I mean, do try removing the comment on height below and inspect the element of #floatingElement.
Here's a working example, simply click the button to adjust the div's position (try using full-page mode when running as the window is a tad small).
const button = document.querySelector('.adjustPosition')
const addText = document.querySelector('.addText')
const elem = document.querySelector('#floatingElement')
const textDiv = elem.querySelector('.textDiv')
button.addEventListener('click', e => {
if (elem.classList.contains('topLeft')) {
elem.classList.add('topCenter')
elem.classList.remove('topLeft')
} else if (elem.classList.contains('topCenter')) {
elem.classList.add('topRight')
elem.classList.remove('topCenter')
} else if (elem.classList.contains('topRight')) {
elem.classList.add('rightCenter')
elem.classList.remove('topRight')
} else if (elem.classList.contains('rightCenter')) {
elem.classList.add('bottomRight')
elem.classList.remove('rightCenter')
} else if (elem.classList.contains('bottomRight')) {
elem.classList.add('bottomCenter')
elem.classList.remove('bottomRight')
} else if (elem.classList.contains('bottomCenter')) {
elem.classList.add('bottomLeft')
elem.classList.remove('bottomCenter')
} else if (elem.classList.contains('bottomLeft')) {
elem.classList.add('leftCenter')
elem.classList.remove('bottomLeft')
} else if (elem.classList.contains('leftCenter')) {
elem.classList.add('topLeft')
elem.classList.remove('leftCenter')
}
})
addText.onclick = () => {
textDiv.innerText += "Added some more text so that the div can be larger"
}
html,
body {
height: 100%;
width: 100%;
margin: 0;
}
#floatingElement {
width: 25%;
/* height: 25%; This causes the height to be fixed */
position: absolute;
pointer-events: none;
z-index: 1;
}
#floatingElement img {
display: block;
width: 100%;
height: 100px;
margin: auto;
object-fit: cover;
}
#floatingElement .textDiv {
text-align: center;
background: rgba(255, 255, 255, 0.5);
border-radius: 5%;
box-shadow: 3px 3px 2px #888888;
}
.adjustPosition {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 25px;
height: 25px;
background: #12121299;
border-radius: 50%;
cursor: pointer;
}
.addText {
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
}
.topLeft {
top: 10px;
left: 10px;
}
.topCenter {
top: 10px;
left: 50%;
transform: translateX(-50%);
}
.topRight {
top: 10px;
right: 10px;
}
.leftCenter {
top: 50%;
left: 10px;
transform: translateY(-50%);
}
.rightCenter {
top: 50%;
right: 10px;
transform: translateY(-50%);
}
.bottomLeft {
bottom: 10px;
left: 10px;
}
.bottomRight {
bottom: 10px;
right: 10px;
}
.bottomCenter {
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
<div id="floatingElement" class="topLeft">
<img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png">
<div class="textDiv">Variable height here because it has a long text</div>
</div>
<div class="adjustPosition"></div>
<div class="addText">Add Text</div>
I have an image with a CSS overlay that slides up from the bottom, and it's on the left. I want it in the center. Also, I hate to admit it, but the other post doesn't help. I got a post suggestion(IDK why), but I don't see how it helps me. I'm not super familiar with this and what I'm doing is for a project in a class of mine, which is late, and I'm trying to shoot for extra credit.
I just want to know how to make it go to the center. I have tried moving it to the left by 25, 50, and 75%, same with the right. It just won't move. Here is the code:
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 50%;
height: auto;
}
/* This is what I have been using with to move it. */
.overlay {
position: absolute;
bottom: 0;
left: 0;
/* This will move wherever */
right: 0;
background-color: darkblue;
overflow: hidden;
width: 50%;
height: 0;
transition: .5s ease;
}
.container:hover .overlay {
height: 100%;
}
.text {
white-space: nowrap;
color: red;
font-size: 20px;
font-family: cursive;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
<div class="container">
<img src="image is here" alt="Avatar" class="image"> This won't move
<div class="overlay">
<div class="text"><u>This is just here atm</u></div>
</div>
</div>
I solved it. I just needed to use the "center" tag and put my style tag in it. Moved the overlay and it was fixed.
This question already has answers here:
Shape with a slanted side (responsive)
(3 answers)
Closed 5 years ago.
I have been searching for a few days now for code to make the right edge of a div slant 45 degrees. Here is an image example of what I am particularly attempting to get...
There seems to be a lot of examples of 'slanted-edge' divs, but I can't find any with the particular right-side slanted.
I have spend a great deal of time trying to alter the codes of the others, but it ends up in a mess.
This is the original CSS code I was experimenting with to get the results I need...
div {
position: relative;
display: inline-block;
padding: 1em 5em 1em 1em;
overflow: hidden;
color: #fff;
}
div:after {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: #000;
-webkit-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transform: skew(-45deg);
-ms-transform: skew(-45deg);
transform: skew(-45deg);
z-index: -1;
}
body {
background:
url('https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpg');
background-size: cover;
}
Here is the HTML....
<div>Slanted div text</div>
<div>
Slanted div text<br/>
on several lines<br/>
Another line
</div>
<div>Wider slanted div text with more text inside</div>
Create your div, then overlay an absolutely-positioned, rotated pseudo-element to create the slanted impression.
div {
height: 50px;
width: 300px;
background-color: black;
position: relative;
overflow: hidden;
}
div:after {
height: 100%;
width: 100%;
background-color: white;
position: absolute;
content: "";
transform: rotate(45deg);
transform-origin: bottom right;
}
<div></div>
I currently have an ng-repeat that looks like this:
<div class="repeaterDiv" data-ng-repeat="item in itemArray">
<div class="wrapper">
<img class="imageClass" ng-src="{{item.image}}"/>
<div class="corner-ribbon bottom-right sticky green shadow">Changed</div>
</div>
</div>
Here is the CSS pulled from this codePen:
.corner-ribbon{
width: 200px;
background: #e43;
position: absolute;
top: 25px;
left: -50px;
text-align: center;
line-height: 50px;
letter-spacing: 1px;
color: #f0f0f0;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.corner-ribbon.sticky{
position: fixed;
}
.corner-ribbon.shadow{
box-shadow: 0 0 3px rgba(0,0,0,.3);
}
.corner-ribbon.bottom-right{
top: auto;
right: -50px;
bottom: 25px;
left: auto;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.corner-ribbon.green{background: #2c7;}
I am trying to figure out how to get the ribbon to be restricted to the wrapper class. Does anyone know how I can do that? so I'm still using the same ribbon, but instead of being in the bottom right of the screen, it is at the bottom right of the image for which it applies?
you need to use relative/absolute position and reset display of .wrapper to shrink on image. Then add overflow:hidden to cut off edges of ribbon:
.corner-ribbon {
width: 200px;
background: #e43;
position: absolute;
top: 25px;
left: -50px;
text-align: center;
line-height: 50px;
letter-spacing: 1px;
color: #f0f0f0;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.corner-ribbon.sticky {
position: absolute;
}
.corner-ribbon.shadow {
box-shadow: 0 0 3px rgba(0, 0, 0, .3);
}
.corner-ribbon.bottom-right {
top: auto;
right: -50px;
bottom: 30px;
left: auto;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.corner-ribbon.green {
background: #2c7;
}
.wrapper {
position: relative;
display: table-cell;/* or inline-block or float */
overflow: hidden;
}
img {
display: block;
}
<div class="repeaterDiv" data-ng-repeat="item in itemArray">
<div class="wrapper">
<img class="imageClass" ng-src="{{item.image}}" src="http://lorempixel.com/300/200" />
<div class="corner-ribbon bottom-right sticky green shadow">Changed</div>
</div>
</div>
The class has fixed positioning.
.corner-ribbon.sticky{
position: fixed;
}
So for exact css you may not be able to attach ribbon to each img, rather ribbon would go to specific place in window only. However, you can adjust css a bit. Make wrapper class relative, and .corner-ribbon.sticky absolute position. Then adjust your css fot top/bottom/left/right properties to align them.
.wrapper{
position: relative;
}
.wrapper .corner-ribbon.sticky{
position: absolute;
/* put top/bottom/left/right values here*/
}
I would like to show the image with a non glassy display. Similar to the following one,
I am using the image as it is. I would like to show that with matte finish.
normal image:
Matte finish:
I am not able find it online. May be I am not using the right search keywords. Could anyone help me with this?
Inside a container I did put an image with reduced contrast / brightness / saturation plus a little bit of blur (all these four effects made by CSS filter). The image could've be placed as the container background but I wanted to apply these filters so it went separated.
After it, there's a colored layer with transparency covering the whole area. The letter represents the page's content that can be anything.
UPDATE: multiple filters must be all in a row, like it is on this latest update:
body {
width: 100%;
height: 100vh;
margin: 0px;
font-family: Georgia, serif;
}
#container {
width: 100%;
height: 100%;
position: relative;
background-color: navy;
overflow: hidden;
}
#thepic {
width: 100vw;
height: 100vh;
object-fit: cover;
-webkit-filter: brightness(90%) contrast(90%) blur(2px) grayscale(10%);
filter: brightness(90%) contrast(90%) blur(2px) grayscale(10%);
}
#color_layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: navy;
opacity: 0.3;
}
#content {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
right: 0;
margin: auto;
text-align: center;
}
h1 {
display: inline-block;
color: white;
text-shadow: 1px 2px 2px #000;
font-size: 4em;
font-weight: 100;
letter-spacing: 2px;
text-align: center;
vertical-align: middle;
}
#letter {
vertical-align: middle;
}
<div id=container>
<img id=thepic src="http://i.imgur.com/s9J4MnI.jpg">
<div id=color_layer></div>
<span id=content><img id=letter src="http://i.imgur.com/CB1vUqy.png" alt=img><h1> 書面</h1></span>
</div>
#freestock.tk - That's the idea I had in mind also.
Here's another way to do it with less markup:
img {
max-width: 100%;
height: auto;
}
.container {
position: relative;
z-index: -1;
}
.container:before {
content: "";
position: absolute;
z-index: 1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
}
<div>
<h1>Original Image</h1>
<img src="http://i.imgur.com/WjbwTUH.jpg">
</div>
<div class="container" id="content">
<h1> With Transparent Overlay </h1>
<img src="http://i.imgur.com/WjbwTUH.jpg">
</div>
In this example, I put the image inside a container that is relatively positioned. The z-index is -1 so it will be behind the next layer.
Then I used a pseudo element that is absolutely positioned so it will stretch across the whole width of the container and cover the image. The positive z-index sets it on top of the first layer. Rather than setting an opacity, I used an rgba value for the background color. The first three numbers or the red, green, and blue values as usual, but the last number is a decimal between 0 and 1 that sets the opacity level. I made it a little darker than you probably want just so you can see the difference. You may also choose a different color to fit your image.
For reference: http://nicolasgallagher.com/css-background-image-hacks/