I'm trying to add something very similar to this design on a site I'm working on:
http://www.templatemonster.com/demo/54794.html
Notice how the mediumturquoise blocks in the bg of the site are diagonal but remain responsive while also having elements in front of them?
How would one go about accomplishing something like this? Is it an image set to full width in css? If so, how do I add content in front of the element?
Here's a screenshot just in case the link expires or I'm not being clear as to what element I'm talking about:
http://screencast.com/t/yYwOuHidK
Use a background image!
.bg-image {
position: relative;
}
.bg-image img {
display: block;
width: 100%;
max-width: 1200px; /* corresponds to max height of 450px */
margin: 0 auto;
}
.bg-image h1 {
position: absolute;
text-align: center;
bottom: 0;
left: 0;
right: 0;
color: white;
}
.nav, .main {
background-color: #f6f6f6;
text-align: center;
}
<div class="container">
<div class="row-fluid">
<div class="span12">
<div class="nav">nav area</div>
<div class="bg-image">
<img src="http://unplugged.ee/wp-content/uploads/2013/03/frank2.jpg">
<h1>This is centered text.</h1>
</div>
<div class="main">main area</div>
</div>
</div>
</div>
See it in a new window (change browser size)
Maybe you could use the CSS transform property like this:
<html>
<div class="rotate-wrapper">
<div class="my-rotated-div">
<div class="rotated-div-content">
My Content
</div>
</div>
</div>
</html>
CSS:
my-rotated-div {
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
}
rotated-div-content {
-ms-transform: rotate(-45deg); /* IE 9 */
-webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
transform: rotate(-45deg);
}
Then you just apply the bootstrap styles to rotate-wrapper and you should be good to go.
If you just want the look of a rotated block you could just use a background image but then you have to micro manage the background-position to match up with what you want.
Related
I have a link that has been rotated and fixed in the window. Problem is I don't know how to position it on the right edge without adding a negative position right.
Negative right position doesn't work when changing the screen sizes, so I need to find another solution..
Any ideas?
Codepen for reference also.
.section {
height: 100vh;
}
.section-one {
background-color: #f8f9fa;
}
.section-two {
background-color: #e9ecef;
}
.section-three {
background-color: #dee2e6;
}
.section-four {
background-color: #ced4da;
}
.fixed-link {
position: fixed;
top: 50%;
/* Need to be fixed to right without adding a negative position right */
right: 0;
transform: translateY(-50%);
transform: rotate(270deg);
transform-origin: 0 0;
}
<div class="container">
<div class="section section-one"></div>
<div class="section section-two"></div>
<div class="section section-three"></div>
<div class="section section-four"></div>
</div>
FIXED LINK
The reason why it doesn't stick to the edge with using transform rotate is because it adjusts the container of the text, but not the text itself which uses the containers borders to stick to the edge of the screen.
A proposed solution without having to use negative right position is to use writing-mode instead, this targets the text directly instead of its container with:
writing-mode: vertical-rl; // This makes your text appear vertical
You can read more about it here for more details: Writing-mode
Try this. although this is a few different on different screen sizes:
.section {
height: 100vh;
}
.section-one {
background-color: #f8f9fa;
}
.section-two {
background-color: #e9ecef;
}
.section-three {
background-color: #dee2e6;
}
.section-four {
background-color: #ced4da;
}
.fixed-link {
width: max-content;
position: fixed;
top: 50%;
/* Need to be fixed to right without adding a negative position right */
left: 95%;
transform: translateY(-50%);
transform: rotate(270deg);
transform-origin: 0 0;
}
<div class="container">
<div class="section section-one"></div>
<div class="section section-two"></div>
<div class="section section-three"></div>
<div class="section section-four"></div>
</div>
FIXED LINK
I'm trying to scale the elements in my body tag so that my website looks the same on differing screen sizes. However, when I apply transform: scale(), the fixed elements associated with bottom disappear. Why is this and how can I fix it?
css
body
{
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
-webkit-transform: scale(1, 1);
}
#invite
{
position: fixed;
bottom: 20px;
right: 31px;
text-align: center;
cursor: pointer;
}
The invite element disappears when I scale with 1.
It will be more helpful if you could include your code and I think you should use media query if you are trying to make your page responsive.
transform:scale(0.5) will create a new binding box for the position:fixed; element, (when that element is a child of the transformed item)
relevant Stackoverflow question
and further explanations in the chromium bug tracker
Example 'buggy' behaviour:
div {
margin: 20px;
padding: 20px;
}
.body {
background: olive;
min-height:600px
}
.main {
background: pink;
}
.bottom {
background: orange;
position: fixed;
bottom: 0;
}
.body:hover {
transform: scale(1)
}
<div class='body'>
<div class="main">
main content</div>
<div class="bottom"> bottom content </div>;
</div>
As for alternatives: responsive design; the general philosophy is to re-arrange elements into a single vertical stack as the viewport gets smaller.
I am trying to center a text of variable length inside a container with fixed height. I thought I've found a solution with an absolute positioned wrapper container, using
top: 50%;
transform: translateY(-50%);
on the text to be centered. It works fine in Firefox and IE, but does not work in Chrome:
Fiddle: https://jsfiddle.net/9uathmvh/7/
Does anyone know why?
Thanks in advance :)
It is because anchor tag is not a block element.
I removed the position rules in .container and .link classes and just set the anchor element height of 100% in order to fill its container.
In my opinion, it would be better to vertically center the whole a.link rather than only its content, but I don't know your exactly needs, so I left it like you asked it.
Please take a look in the snippet below:
.container {
height: 42px;
width: 200px;
border: 1px solid blue;
margin-bottom: 5px;
}
.link {
height: 100%;
display: block;
}
.center {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
<div class="container">
<a class="link">
<div class="center">
Centered Text in one line
</div>
</a>
</div>
<div class="container">
<a class="link">
<div class="center">
Centered Text, more than one line but still centered
</div>
</a>
</div>
I am trying to style a page with a righthand side bar that has a menu. I am using div tags. What I get looks close, but it is not obvious to me how to create the menu div in the right bar that should contain the rotated menu item divs. The image illustrates what I mean. The right bar is transparent such that the main page content below is visible. I want to animate the bar div with Javascript but accomplished that already.
Currently, I have in my css
#menu_list {
top: 0;
left: 0;
padding: 0 0;
text-align: center;
transform-origin: center top;
transform: translateX(-50%) translateY(300%) rotate(-90deg);
}
#menu_list p {
color: #fff;
line-height: 20px;
display: inline-block;
}
#right_bar {
position: fixed;
top: 0;
bottom: 0;
right: 0;
width: 30%;
overflow: auto;
padding: 0;
}
and as html
<div id="bar_wrapper" onclick="toggleMenu()">
<div>
<div id="menu_list">
<p>Info</p>
<p>About</p>
</div>
<div style="width:30%; height:100%; position:fixed; top:0; right:0; bottom:0;">
<h4>
Info
</h4>
</div>
</div>
</div>
but that, like other things that I have tried, does not quite do it.
try this:
jsfiddle.net/TiG3R/bLksqtpw
for rotating navbar you should rotate navbar div not rotate tabs, look at example
use css transform property on your default navbar.
#div_name {
-ms-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
but I think it won't look responsive.but will look exactly as like u want
enter image description here
I'm attempting to rotate a div to which I have applied a 'page curl' drop shadow.
The page curl drop shadow effect is working fine until I rotate the div, at which point the drop shadow elements show up through the div (z-index issue)?
I've also noticed that if I have an image as the div content, I don't get this issue, but I'd love to get it working for a div with text content. Any suggestions?
Here's the code:
CSS (vendor prefixes removed to shorten code, but the problem is occurring across all modern browsers):
.shadow {border:1px solid #ccc;position:relative;width:300px;height:116px;background-color:#ededed;}
.shadow:before, .shadow:after {
bottom:13px;
content: "";
position: absolute;
z-index: -1;
-moz-transform: rotate(-11deg);
box-shadow: 0 15px 5px rgba(0, 0, 0, 0.2);
height: 50px;
max-width: 50%;
width: 50%;
left:3px;
}
.shadow:after {
-moz-transform: rotate(11deg);
left: auto;
right: 2px;
}
.rotate{
-moz-transform: rotate(4deg);
}
HTML:
<div class="shadow">this is the first div</div> <!-- this one is ok -->
<div class="shadow rotate">this is the second div</div> <!-- this has the issue -->
<div class="shadow rotate"><img src="//www.google.com/logos/2012/Teachers_Day_Alt-2012-hp.jpg" width="300" height="116"></div> <!-- this one is ok -->
And here's a jsfiddle:
http://jsfiddle.net/U8qY3/5/
Nice job!
As a workaround, you can put a DIV inside the rotated div, with background-colour set to underneath one, and full height and width, like this: http://jsfiddle.net/U8qY3/6/
HTML
<div class="shadow rotate">
<div class="workaround">this is the second div</div>
</div>
CSS
.workaround{
height: 100%;
width: 100%;
background-color: #ededed;
}