I want to do this
How to do these with CSS?
Update
How do I align the cylinders on the same bottom, and how do I add the caption below them?
You have to split the cylinder image in three parts: The top, the middle (which will be repeated), and the bottom. Like this:
Call them top.png, middle.png, and bottom.png, for example.
Then you need three HTML elements, one for each part:
<div class="cylinder top"></div>
<div class="cylinder middle" style="height:300px"></div>
<div class="cylinder bottom"></div>
And the css:
.cylinder {
width: <width of the cylinder image>px;
}
.cylinder.top {
background-image:url('top.png') no-repeat;
height: <height of the top image>px;
}
.cylinder.middle {
background-image:url('middle.png') repeat-y; /* repeat vertically */
}
.cylinder.bottom {
background-image:url('bottom.png') no-repeat;
height: <height of the bottom image>px;
}
To change the height or the cylinder, you just have to modify the style="height:300px" on the middle element.
This solution will work in any browser, even IE6.
Here is a list of tutorials for the same
You can build one using a jQuery plugin as well
or you can try Google Chart Api
http://codepen.io/msvbg/pen/Lymko
This is just for fun. In pure CSS3, no JS or images. A better approach would probably be to simply use one of the many charting libraries out there.
Create a bottom image for the rounding.
Create a 1px high image for the pipe
Create a little image for the top.
Divide your image into different divs.
<div>
<div class="bar1">
<div class="bottom"></div>
<div class="middle"></div>
<div class="top"></div>
</div>
</div>
Now you can style this with absolute positioning and repeating background images. I don't think it is very easy to do with floating and all, because you have to work from bottom to top.
Doing this with pure CSS might be overkill. Of course you can use gradients, but you can't get that shadow on the bottom of cylinders with css only. I'm not sure how to do cylinders top with css either.
The easiest way to do that is to use good old background images.
You might consider using canvas if you don't want any images at all.
UPD: If you can use CSS3, you might wanna use multiple background images. That way you'll have only one <div> instead of three of them. Good semantics.
Take a look at http://icant.co.uk/csscharts/. It's easily customizable with your own styles and has a handy PHP script for generating the tables.
Well... it can be done with some "brute force".
First of all you should cut the bases of the cilinders and put them on a background of a div with bottom alignment.
then in another div with know and fixed height add two divs of same width that float left and have on the background,repeating on Y axis a slice of a cilinder. then control their height as you need it. Below the div that contains the other two you can add the captions.
Now you will have the cilinders of the same height. In order to "shorten" one you create another div inside it that has a certain height and a white background (repeating image or color).
ex {
<div id="chart"> <!-- this one has the bottom cut backgound -->
<div style="height:200px">
<!-- cilinder class has the background -->
<div class="clinder" style="height:100%"> </div>
<div class="clinder" style="height:100%">
<!-- this one has white bg -->
<div class="shorter" style="height:30px"> </div>
<div>
</div>
<div class="labels">
<div class="caption">
Indoor
</div>
<div class="caption">
Outdoor
</div>
</div>
</div>
It should work like this.
You can make cylinders with CSS3 by giving it a box-radius.
For example:
box-radius: 100px / 30px;
This will give you a box an oval look.
Just give it the desired width and height and it's done :)
Or use jqPlot as a jquery plugin. This plugin can make lots of graphs.
Related
I'm having some issue with a video div that will have a responsive width.
There's 3 images that need to stick to the video element
green (left side)
orange (right side)
red (bottom side)
The issue's is that
If I make it one big background image it will be stretched and the arrows lose it's aspect ratio.
How could I go about achieving this effects? Whilst keeping full responsiveness.
This presents an interesting challenge. I'm sure others have written something potentially more useful. I just wanted to practice my written communication skills.
I discovered a method to help with your question:https://codepen.io/viewtifulmoejoe/pen/yPvQmz?editors=1100
I'm putting in this code to fulfill the code requirement of SO.
<div class="viewer_component">
<div class="viewer_component__bgImg">
<img src="https://i.imgur.com/rQmri0X.jpg" alt="">
</div>
<div class="viewer_component__video">
<a href="#">
<img src="https://placehold.it/854x480" alt="" class="viewer_component__video--src">
</a>
</div>
</div>
I used this image to prototype a method: https://imgur.com/rQmri0X
The black outline serves as the imaginary frame around the video similar to the image you posted.
I used a placeholder image to imitate the video and used the dimensions of a traditional youtube video.
The method requires that the imaginary frame in the background image match the ratio of the video container. This is the only way I know to make the the effect work as expected without plugins/libraries/javascript.
Please let me know if this helps you with this challenge. Any questions, I'm happy to oblige.
A more scalable method would be to have multiple images saved out. 1 for the left/top/right/bottom of the video container and position them relative to the video. This method requires a bit of finesse.
This should not be too hard using either flexbox or display: table;. Take a look at the following example:
.container {
display: flex;
}
.container div {
flex: 1 1 auto;
border: 1px solid #FFF;
background: #CCC;
}
<div class="container">
<div></div>
<div style="flex: 0;">
<iframe width="300" height="100"></iframe>
</div>
<div></div>
</div>
The red bar at the bottom is just a block element. You could use background images to apply the image patterns.
A few ways to do it:
Use flexbox
Use display: table;, display: table-row, display:table-cell to build a table out of divs
Use tables
I am trying to make a div vertically centered inside a parent div.At the same time I don't want the child div not to be responsive.
Here is the html code
<div class="wrap">
<div style="background: url('http://www.screensavergift.com/wp-content/uploads/GoldenNature2-610x320.jpg') no-repeat; background-position: 25% 50%; background-size: cover;" class="menu_item"></div>
<div class="menu-box-border"></div>
<div class="menu-box-content-box">
<h3>Some Text</h3>
</div>
</div>
I have created a demo here -- http://jsfiddle.net/squidraj/4eewp8x0/7/
As you can see the semi transparent box with overlay is always staying at the bottom and on browser resize the box is also resizing and as a result the overlay box is causing problem to the text.
Any help/suggestion is highly appreciated. Thanks in advance.
First of all, there is a well-known trick to do this, you can read it on https://css-tricks.com/centering-in-the-unknown/
This will give you this: http://jsfiddle.net/4eewp8x0/8/
However, as we have more and more powerful tools of CSS3, I'd like to present some more tricks.
CSS Transform
The essence of this trick is that we absolutely position the child at (50%,50%), and then do a translate of (-50%,-50%)
You will have this: http://jsfiddle.net/4eewp8x0/9/
Flex Layout
At last, people who are filled up with fury toward the difficulties aligning elements come up with flex layout.
You can read about flex layout here:https://css-tricks.com/snippets/css/a-guide-to-flexbox/
You will have this: http://jsfiddle.net/4eewp8x0/11/
I need to create a row for a front page (like a slider) with an image where there is a man and behind him is a gradient.
the image is as it is, centered in container (width 1170px) and that works fine but i need to make a row behind the image to go full 100% for larger resolutions. I am using bootstrap 3.
The way I see it, the background 'row' div should have a dark color from left to center, and from center white color should go to the right.
I dont believe a gradient on row should work because of the resizing hm?
I cant find any similar websites that have this.
Is there a better solution?
<div class="row">
<div class="col-md-12">
<div class="container" id="slider">
</div>
</div>
</div>
#slider {
background: url('image.jpg');
height: 550px;
}
For this kind of Design normally we remove left portion if it's not necessary. Otherwise we need to make display block both div left and right.
I have two divs (the left one is an image) inside a wrapper that are meant to be next to each other, the div on the right being positioned absolute with right:0 and bottom:0 so it positions to the bottom of the div image on its left. The issue is, when the screen gets small enough the position absolute one overlaps the image. I have added a div that just occupies space in the wrapper and I've avoided the overlap, but now when you make the screen smaller the div goes under the image but it doesn't reposition itself right underneath; it shifts to the right. Here is an example on JSfiddle:
http://jsfiddle.net/xbdsq7zj/
Here is the html:
<div class='ideaside'>
<div class='ideaphoto'>
<img src='http://www.devsourcecodex.com/images/advertisingexamples/200x200.png'></img>
</div>
<div style="float:left; width:150px; height: 120px;"> </div>
<div class='ideainfo'>
<p clas='glyphicon glyphicon-star unclickable'></p>
<span>Followers</span></p>
<p><strong>
Phase 1
</strong></p>
<p>By <%= render #idea.user %></p>
<i>2 hours ago </i>
</div>
</div>
<br>
<p class='doc'>
<b>Brief:</b>
t's not fallacious at all because HTML was designed intentionally. Misuse of an element might not be completely out of question (after all, new idioms have developed in other languages, as well) but possible negative implications have to be counterbalanced. Additionally, even if there were no arguments against misusing the <table> element today, there might be tomorrow because of the way browser vendors apply special treatment to the element. After all, they know that “<table> elements are for tabular data only” and might use this fact to improve the rendering engine, in the process subtly changing how <table>s behave, and thus breaking cases where it was previously misused.
</p>
Here is the css:
.ideaphoto {
float:left;
}
.ideainfo {
position:absolute;
bottom:0;
right:0;
}
.ideaside {
position:relative;
overflow:hidden;
}
I'd like it to go to reposition so that it is directly under the image rather than next to some whitespace under the image. Is that possible without using Jquery collision detection?
Thanks.
Edit: I am using Bootstrap, and this is all taking place in col-md-4. The image is always 200px, but the text div's width is sort of variable depending on the user's name.
I think bootstrap's function, (assuming your using bootstrap for this because of the glyphicon) will be of use to you. You don't have to use float anymore because bootstrap will do it for you.
<div class="row">
<div class="col-md-6 col-sm-12 ideaphoto"> <!--If viewport is regular it will take up half of the page. But if viewport is smaller it will consume a row, thus repositioning the .ideainfo below it.-->
<!--Enter your Image code here.-->
</div>
<div class="col-md-6 col-sm-12 ideainfo">
<!--Enter your IdeaInfo here.-->
</div>
</div>
I'm using the 960 grid system for a site design and I'd like to be able to change the background color of particular columns. I've figured out how to change the background color of the entire container by doing something like
.container_12 {
background-color: #000000;
overflow: hidden; /* so that the margin is transparent */
}
However, what if I want to change the background color of, say, just columns 1-3? I'd like the color to go all the way to the bottom of the container.
Example. Let's say I have some html like:
<div class="container_12">
<div class="grid_4 alpha"> a </div>
<div class="grid_4"> b </div>
<div class="grid_4 omega"> c </div>
<div class="grid_1 alpha"> A </div>
<div class="grid_10"> B </div>
<div class="grid_1 omega"> C </div>
</div>
I want to style it so that columns 1-3 have a given background color. This would mean that the first three columns of the a div, the A div, and the first two columns of the B div would have this color. Basically I want to style columns, not grids. Is this possible?
I am not sure I understood it correctly and I'm not familiar with 960gs framework. I supposed the columns are resized based on percents, in which case I think my solution will work.
also, your container needs to have a fixed height so it will be colored top to bottom.
So the trick is:
in your container_12, put an empty
set its height to 100% and background to whathever
set it margin-right so that it equals exactly the opposite of its width
Have a look a this http://codepen.io/joe/pen/bwBky
You could do it like this:
.grid_4.alpha, .grid_1.alpha {
background-color: blue;
}
.grid_4, .grid_10 {
background-color: red;
}
.grid_4.omega, .grid_1.omega {
background-color: green;
}
Working Example: http://jsfiddle.net/fewds/tnMhc/
I think what's happening here is that your idea of the grid system isn't quite how they are intended to be used. And that's perfectly fine, as I only recently started using grid systems as well!
Grid systems are meant to provide structure for your content, not styles.
.grid_4, .grid_8, and .grid_12 are meant to be columns, not cells. If you want div a and div A to be in the first column, you would put them one after another in .grid_4 alpha.
And since grid systems aren't meant for styling, you should avoid styling the grid CSS and instead create your own styles.
So your HTML would end up looking like this:
<div class="container_12">
<div class="grid_4 alpha red-column">
<div>Content-a</div>
<div>Content-A</div>
</div>
<div class="grid_4 green-column">
<div>Content-b</div>
<div>Content-B</b>
</div>
<div class="grid_4 omega blue-column">
<div>Content-c</div>
<div>Content-C</div>
</div>
</div>
And then you'd add this to your CSS:
.red-column {background-color:#f00;}
.green-column {background-color:#0f0;}
.blue-column {background-color:#00f;}