me and a mate are working on a html app similar that will look similar to the ipad twitter app.
http://www.iampersandi.com/wp-content/uploads/2010/04/photo3.png
I am wondering how they created the feint lines that seperate the dark grey user boxes.
I currently have this as a resizeable div, with each user having it's own div within that (eg Chris Purillo and Jeff Pulver would be in separate divs within the large resizeable div).
Is the feint line separating them just a clever truck using background colors with css3 or is there a better way to create this?
You could try doing:
border-top:1px solid #46464f;
border-bottom:1px solid #282832;
i would just use a background image that is 1px wide and 2px high with the two associated colors and set it to the top of the div
#div {
background:url('border.jpg') repeat-x top
}
or even set it as a border-image: css property
http://www.css3.info/preview/border-image/
Related
I want to recreate an interface similar to Windows Phone 10.
You can see an example of what I try to achieve in HTML in this picture:
The middle tiles act like Windows on the baby picture while the space between tiles is black.
There's no magic going on here. In the picture you've supplied the phone has a desktop of a child that is letterboxed (black stripe across top and bottom). The tiles on the top and bottom of the screen are opaque and show their own backgrounds. The tiles in the middle are fully transparent, but have a solid black border to them to show the child behind them.
To make the tiles, you simply need this:
.tile { background-color:rgba(0,0,0,0);
border: 3px solid black;
}
Take a look at this fiddle for a basic example: https://jsfiddle.net/Lnafvvx9/6/
For a dynamic approach:
You could slice a picture in many litte parts (and delete the sliced borders). Then you create and align different divs with a individual background image containing your sliced picture parts.
There is also a kind of work around for static pages:
Create one div with the big (not sliced picture).
Use a transparent PNG image containing only the "border" of the black background. Place that in a div on top of the other div and you got the style. Then you need to add little divs ontop of the positions where you can see the picture.
The important thing is, that these designs require pixel perfect static layout. This means you can't scale divs size or change the position when the browser window or screen is smaller. But its also the easiest way do do that and the last suggestion allows to change the picture without slicing it.
For real dynamic approach you could load the same picture (unsliced) in every button (use different css id for everyone) and position the background of them individually to fit together. The advantage of this is, that you can then use CSS3 for instance to scale the button size on hover. This can lead to a cool expanding image effect. Just look up
http://www.w3schools.com/cssref/pr_background-position.asp
http://www.w3schools.com/css/css3_animations.asp
I hope that helps :)
I was wondering if is this possible, or not.
I have this rectangle, bordered with 1px solid black.
CSS
.box {border: 1px solid #000000}
Soon as I am actually developing an hand-draw template, I assume to have this in dropdown menus:
Is this possible, using background property?
EDIT: I don't know the size of the dropdown, and it's not good idea create it with fixed size (the menu need to be editable)
Yes, but it will need to be a fixed size if you don't find a solution that makes it expandable. I would leave the top open ended, and make the image rather tall with long sides so it can accommodate your content by anchoring it to the bottom of your drop down div. Anything leftover will be cut off at the the top of the div anyways because the background is exclusive to it.
I am working as an internship for a company and the owner has asked if it would be possible to fade the random images that appear to the right of the website down to near the bottom of the page (that was bland, will go into detail below).
So far, I have set up a test site and here is a page example.
The site uses Joomla CMS (not my choice). If you look at the right there is an image of a musician, each refresh pulls up a different musician/image. What my boss wanted me to do (since apparently I'm low on tasks since revamping their site) is to make a fade gradient that starts at black under the image that uses the rest of the pages height to slowly transition to the background color or transparent (I assume the background color would be easier). So far my thoughts are that this is pretty impossible but I thought I would ask you guys anyways.
My main issue is the height right column of the page to dynamically match with the height of the page height... if that is possible. I know how to make it gradient, but the height issue is bugging me!
The CSS for the whole right column (without gradient, obviously) is:
#columnrt {
width:200px;
background-color:#673601;
float:right; }
If inspecting the source code on the page, the random image shows up in a class called "random-image" in which I have a strong feeling it's generated by Joomla... example so you can identify the what image are I am talking about:
<div class="random-image"><img src="/images/stories/sidebar/lubsym_nov11_017-crop.jpg" width="200" height="306"></div>
Any input would be nice, thank you all!
PS: unpaid internship... I don't want you guys to think I'm leaching off y'all!
As you say, your main problem is making the right column as tall as the page, i.e. extend down as far as the main content. This can be solved by adding to the CSS:
#columnrt {
width:200px;
background-color:#673601;
position:absolute;
top: 0;
right:0;
bottom:0;
}
That will make the height of the right column extend properly, allowing you to add the gradient.
use below css and one div and your assignment will be completed
td { position: relative; }
.bg-gradient { background: blue; min-height: 100%; width: 200px; position: absolute; z-index:-1; }
add this div as first child under '.columnrt'
<div class="bg-gradient"></div>
give background gradient you desire to '.bg-gradient' in css
I'm trying to understand this webpage:
http://www.canadianliving.com/food/slow_cooker_beef_stew.php
It is divided into several sections where each section has a border around it. For example, to the right of the title "Slow-Cooker Beef Stew" is an image "tested till perfect". Immediately to the right of this is a border, which separates it from an advertisement. This border extends down and separates the section from the "Related Content" section below.
But what is making the border? I am using Chrome's Inspect Element, Computed Style, but none of the tags seem to have a border-style. What else can create a border?
(I'm not looking for the best way to make a border; I need to understand how other pages do it.)
EDIT:
Based on people's answers, I tried the html below, which is not working. I don't get how an image in a parent div is repeated in each child div in such a way that it fits exactly along the border.
<div style = "float:left;background-image:url('http://www.canadianliving.com/media/images/background_02.png?201206051535');background-clip:border-box;background-origin:padding-box;background-repeat:repeat-y;" >
<div style = "float:left;width:300px;background-clip:border-box;background-origin:padding-box;padding-left:8px">hello</div>
<div style = "float:left;width:300px;background-clip:border-box;background-origin:padding-box;padding-left:8px">there</div>
</div>
http://www.canadianliving.com/media/images/background_02.png?201206051535
Its an image, not a border, remove the image to get rid of the 'border'.
I deduced this by selecting the container element and reviewing the css background property,
for future reference.
Here an example:
<style>
div#test {
height:800px;
width:800px;
background:url(http://www.canadianliving.com/media/images/background_02.png?201206051535) top right repeat-y #676767;
}
</style>
<div id="test">TestDiv<div>
Keep in mind, this is a rough sketch of what it should look like. I'm not planning on learning you this without some effort. Try w3schools for an html / css tutorial.
I'm betting we all did this kind of research and a lot of trying before trying to submit to these kind of forums.
Happy coding, good luck!
D.
The background is set on the div#right_col where the ads are. They have a padding-left of 8px (width of the shadow background image) and a background set on content-container with url('/media/images/background_02.png') 0 630px repeat-y.
basically, it is a background url that is used as a shadow border. Please look at the CSS of #content_container in firebug/chrome inspect element.
It is not a border but used as a seperator.
I'm not after the 'best' way, that requires a lot of work doing large changes for different browsers, but the 'best easy' way... ideally the least horrible way that would work unchanged on IE7+, FF2+, Chrome. Tables are an option but probably a little too archaic. Is there a middle ground, which uses CSS without a lot of hassle?
And, if you want your borders to be more advanced than simple lines, are images+tables the best/only way, or is there a neat CSS+images solution?
Facebox uses tables, it's pretty much the easiest way to do it and support IE(6|7|8). Otherwise, I'd use border-radius and deliver some non-rounded corners to IE(6|7|8), which is what Google did for the longest time.
I don´t know if javascript is an option, but if it is, I would recommend jQuery Corner.
It applies css corners to the browsers that support them and scripts corners for the browsers that don´t (IE...).
Check out the CSS Play site, it has a lot of "snazzy borders" and "krazy korners"
Personally I like to use the "sliding door" technique.
The method you use depends on what elements you need to have round corners. Are they going to be fixed width or height? Thats the major question. If you have a fixed width, you can simply make a top image (bkg_top.jpg) and a bottom image (bkg_bottom.jpg) then put the one inside the other.
lets assume you want a 500px wide box with 10px rounded corners and a background color of #555555.
HTML:
<div id="content_box">
<p>lorem ipsum...</p>
<div id="content_box_bottom"></div>
</div>
CSS:
#content_box {
background: #555 url(bkg_top.jpg) no-repeat scroll 0 top;
padding-top:10px; /*the height of the top image*/
width:500px;
}
#content_box_bottom {
background: #555 url(bkg_bottom.jpg) no-repeat scroll 0 bottom;
height:10px; /* the height of the image */
}
The bottom div will strech to fill the content_box and create the bottom of the rounded box.
Thats just one example.
Here is another good web rounded corners
Agreed if the rounded-corner box is not fluid, and fixed in width then you should simply use 2 images as demonstrated above.
You could even add the bottom rounded corner image to the last element appearing in the box depending on the circumstances (if it is a block element), this would have the advantage of not having additional markup which is always an advantage.