My code should do the following:
A background big semi-black bar that is rotated 5 degrees.
JSFiddle
<div class="con-fluid"><div class="_978y"></div></div>
.con-fluid{
width: 100%;
}
._978y{
background-color: #2d2d2d;
width: 200%;
height: 296px;
position: absolute;
-webkit-transform: rotate(5.13deg);
-moz-transform: rotate(5.13deg);
-ms-transform: rotate(5.13deg);
-o-transform: rotate(5.13deg);
transform: rotate(5.13deg);
}
/*as you can see, the rotation code is universal to make sure it works on almost all browsers/
The issue: it's not filling on both its ends. You can see it clearly in the code preview.
what I want is basically filling this empty area so it doesn't look off the chart. Any thoughts?
Thanks in advance.
I don't quite understand your query, however, I think you are asking about the missing "triangle" on the top right of the rectangle. It is there because you rotated the rectangle.
To hide it, put margin-top: -10px; within the css for ._978y, moving the rectangle up 10px.
Related
I want to show a text with vertical orientation, but, all examples I find on the internet display the text vertically, but like it was written from up to bottom
I want exactly the opposite
I combine writing-mode with text-orientation, but I can't get the result I want
Thanks in advance,
Rafael
You can try use transform and rotate
.word {
margin: 50px -30px;
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
background-color: whitesmoke;
width: 100px;
text-align: center;
}
<div class="word">hello world</div>
More about how to use this here
I did it
Just used transform
transform: rotate(-90deg)
Which is the same as rotating 270deg
I am working on a webpage design. There I have to direct the text upright. I am doing it via transform rotate and setting the origin. However, the text on the side of each square positions differently specially on the right side. if the text characters are more or less the transform origin property works differently and the text on the side of the square goes to far or goes in. I have no idea what is going on. This is the fiddle. I can't paste the code here that would be too messy and lengthy here.
.right-vertical-text{
transform: rotate(90deg);
transform-origin: 65px 85px;
margin:15px;
right: 0px;
}
the transform-origin here does not work consistently for all the side headers.
for example the side header header is positioned very far from the square.
Should replace the css
.right-vertical-text {
transform: rotate(90deg);
transform-origin: 65px 85px;
margin: 15px;
right: 0px;
width: 135px; /*Added*/
}
For some reason the position of h2 is depends upon the width of its parent
Is it possible to cut a triangle from a <div> like in the picture below?
The background is actually not just colour, but in my case is a blurred picture, so I can’t simply cover the green <div> with a brown triangle image. Is there some other CSS way to achieve this effect? Thanks.
The illusion of it is possible: http://jsfiddle.net/2hCrw/4/
Tested with: IE 9, 10, Firefox, Chrome, Safari on PC and iPad.
::before and ::after pseudo elements are skewed to provide a side of the triangle each.
Wrapper used for clipping skewed pseudo elements. You may be able to avoid this by using your outer container as the wrapper.
Elements can still be styled with borders, shadows, etc.
Anything underneath will show through properly.
Demo with borders and drop shadow: http://jsfiddle.net/2hCrw/8/
This demo also adds a tweak for iPad with Retina to prevent a gap between the element and the pseudo elements (either caused by drop shadow bleed or sub-pixel rendering behavior).
<div id="wrapper">
<div id="test">test</div>
</div>
#wrapper {
overflow: hidden;
height: 116px;
}
#test {
height: 100px;
background-color: #ccc;
position: relative;
}
#test::before {
content:"";
position: absolute;
left: -8px;
width: 50%;
height: 16px;
top: 100px;
background-color: #ccc;
-webkit-transform: skew(-40deg);
-moz-transform: skew(-40deg);
-o-transform: skew(-40deg);
-ms-transform: skew(-40deg);
transform: skew(-40deg);
}
#test::after {
content:"";
position: absolute;
right: -8px;
width: 50%;
height: 16px;
top: 100px;
background-color: #ccc;
-webkit-transform: skew(40deg);
-moz-transform: skew(40deg);
-o-transform: skew(40deg);
-ms-transform: skew(40deg);
transform: skew(40deg);
}
As an alternative, you can use a transparent image and "extend" the element above it with pseudo elements. I have answered a similar question regarding a circle cut from an element and show support options down to IE7 (as well as future options for true clipping/masking in CSS).
You can do something like this with CSS masks (examples):
http://codepen.io/anon/pen/vgbEH (anti-triangle mask)
http://codepen.io/anon/pen/pEufn (triangle mask)
I used clip-path: polygon(…) property but only my Chrome seems to support it; you could instead create polygon images and reference them with mask-image for broader support.
It isn't possible to cut from divs in css, but it is possible to use an image overlaying the div to make it look like it has been cut.
.triangle{
background-image: url('cut.png');
width: 24px; height: 24px;
z-index: 1;
position: absolute; top: 32px; left: 15px;
}
It looks like there’s a bit of a drop shadow on your <div> as well, which I’m guessing the triangle should respect.
CSS doesn’t currently provide a way to achieve this directly. One approach would be to create an image of the green bottom area of the <div> with the triangle cut-out in it (using e.g. Photoshop), set it as the background of a <div> inside your original <div>, and position it outside of your original <div>.
Here’s a JS Fiddle example that hopefully explains the idea:
http://jsfiddle.net/7y6nz/
I'm designing a website using Dreamweaver and I'm having some problems with aligning the menu bar. I'm using an image designed in Photoshop and then exported over to dreamweaver. The image is to go in the center of the banner as it contains the links to the other pages of the website. I'm having difficulty center aligning this. It needs to be center aligned by the middle of the image, not by the left edge of the image. I have been using this code in CSS to do so:
position: fixed; (The menu bar needs to always be at the top, even when scrolling)
top: 0px;
left: 50%;
margin-right: -50%
transform: translate(-50%, 0%);
This has been working for Google Chrome, but on Safari it doesn't work. The image still aligns by the left margin of the picture.
Any help would be greatly appreciated.
I have also tried using margin-left: 50%; instead of transform and that doesn't seem to work.
Have you tried with the prefix?
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
Is there a way i can draw the black "background" behind the image using pure CSS ?
I am persuaded that it can be done using the :before pseudo-class. But i can't make it work. I have also tried using shadows, but the final result is not similar what i am trying to achieve.
Scope and requirements:
Modern browsers, no javascript, no jQuery, no plugins and no extra HTML markup.
Before answering:
I know there are zillion ways to achieve what i am trying to do, however i am really looking forward for a pure CSS solution. As stated before, trying to avoid extra markup and javascript for something as simple as that. Thanks!
Here is a fiddle and the code below.
img {
position: absolute;
top: 100px;
left: 100px;
-webkit-transform-origin: center left;
-moz-transform-origin: center left;
-ms-transform-origin: center left;
-o-transform-origin: center left;
transform-origin: center left;
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
transform: rotate(-2deg);
}
img:before {
background: #000;
-webkit-transform-origin: center left;
-moz-transform-origin: center left;
-ms-transform-origin: center left;
-o-transform-origin: center left;
transform-origin: center left;
-webkit-transform: rotate(-4deg);
-moz-transform: rotate(-4deg);
-ms-transform: rotate(-4deg);
-o-transform: rotate(-4deg);
transform: rotate(-4deg);
width: 300px;
height: 300px;
content: ".";
}
<!doctype html>
<html>
<body>
<img width="300" height="150" src="http://upload.wikimedia.org/wikipedia/en/7/70/Example.png" />
</body>
</html>
It seems like the before: element is ignored on img tags - http://jsfiddle.net/GVdYe/
Added a div (sorry :-)
The problem you're having is related to how pseudo-elements work.
Before and after elements are rendered inside their parent. So:
div:before{ content:'before'; }
div:after{ content:'after'; }
renders basically like this:
<div> <span>before</span> Hello <span>after</span> </div>
You can't put other elements in img, because img is a replaced element, and therefore can't apply pseudo-elements to it. Read the spec.
So, the easiest option would be to wrap the image in an <a> (as images sometimes are) and apply your before style to the a.
Alternatively, accept the non-rotated shadow box-shadow provides.
CSS has limitations unfortunately, so you're going to have to compromise somewhere, either in design (I would argue this is the way to go) or in markup.
<style>
html (or body) {
background: url();
}
</style>
I don't know if you just want it behind the image or the entire browser. If you want it behind the image only then you will need a wrapper or at least another <div>, <span> or <img>