I designed the layout for my personal website. I designed lines as separators. In the layout I made two lines side by side. One is dark and one white so I've created a nice effect which I want to create by code using CSS3 without include any images.
I've attached two images to see the lines that I'm talking about.
Thanks a lot for your time guys.
Cheers!
It's quite hard to see exactly what you mean from the screenshots -- I assume the shiny circles are your way of highlighting the bit you want to show us, but actually they make it harder make out the images properly, and they're quite low-res anyway which doesn't help. But I'll try to help anyway.
What you're asking for is fairly common. Typically you'd use CSS borders for this kind of thing.
Something like this:
border-left: 2px groove black; height: 50px; width: 2px;
This is all standard CSS; you don't need any CSS3 trickery here.
try
div {
width:50px;
border-right:1px solid black;
box-shadow: rgba(255,255,255,0.8) 1px 0px 0px;
}
I have slightly different approach. See this previous post:
Two color borders
Here's an example for you: http://dabblet.com/gist/2416433
Related
In the Chrome devtools, Firefox devtools, Safari, Opera, etc., if I inspect an element I can see its bounding box nicely outlined when I mouse over the code for that element in the source panel. That's great. But what if I'd like to see how all (or most of) the elements on the page are laid out? For instance, maybe I'd like to see something like this:
In the Firefox "Style Editor" I've added these styles:
div { border: 1px dotted pink }
p { border: 1px solid green }
a { border: 2px solid yellow }
li { border: 1px dashed cyan }
img { border: 1px solid purple}
(Chrome can't do this since it doesn't support the UAAG 2.0 web standard for accessibility). Since the user agent style sheet overrides the styles from the page, I see the kind of outlines I'm looking for.
Now this is just a hack, and perhaps is sufficient, but are there other tools that do this, or something in the devtools that I didn't find?
Note: I did find this answer regarding the "Show composited layer borders" under the Rendering menu option in Chrome, but it's not really what I'm looking for:
https://superuser.com/questions/774424/grid-overlay-showing-up-as-soon-a-i-launch-chrome-developer-tools
I use this way
*:hover {
outline:1px blue solid;
}
You dont have to edit User agent style sheet as you can do it using developer tools [F12].
You need to add this code
*{border: 1px solid #fff}
It turns out I was looking for a browser extension a friend had mentioned a long time ago: the "Web Developer" extension.
http://chrispederick.com/work/web-developer/
Here's what it looks like outlining the block level elements:
It's available for Chrome, Firefox, and Opera. Apparently not for Safari.
Another useful concept came up this year, 2022:
* {
background: rgb(0 100 0 / 0.1) !important;
}
The idea is that every element gets a certain amount of coloring so that we can visually determine how much overlapping space there is because multiple overlaps will become darker. It will look like this:
The technique reveals that there is excess space on the right hand side of the card 1 h2 tag.
The above image was authored by Kevin Powell on his codepen.
He describes the whole concept in a very cogent YouTube video called The console.log of CSS which is under a minute long.
If you are using Firefox Quantum:
https://addons.mozilla.org/en-US/firefox/addon/open-pesticide/?src=search
Open Pesticide by MatthewBaa
Outlines each element on the page to help you visualize their
dimensions and overcome those annoying CSS layout issues. Requires
zero permissions and completely open source.
I'm making a friends list script for an online browser game I play. I have 4 divs I need within the wrapper: 1) List of friends, 2) Add Friend, 3) Friend requests, 4) Chat. I figured out how to get the first two, but I need advice adding the rest. Here's what I have so far and what I want to add:
What would be the best way to add the two divs on the right? Should I make some sort of table of the 4 divs?
My css for the two divs both look something like this:
position: relative;
width: 40%;
height: 70%;
top: 5%;
left: 2%;
border: 1px solid blue;
If anyone can give me insight on a good way to accomplish this setup I'd greatly appreciate it. Here's a fiddle of the basic outline I have so far: https://jsfiddle.net/kfupd6hb/1/
You can use float:left; attribute of css.
I've updated ur fiddle..
Somehow i'm unable to create a link here that's why providing link in comment.
I suggest using display:inline-block; to get the <div>'s side by side, you can make a really perfect grid with that property.
I am trying to obtain a dashed table border, which has rounded edges (using border-radius). I have achieved this in all other browsers, but I know it is a bug in Firefox, and will never display properly. See the problem I have here.
I am wondering if it was possible to have Firefox alone displaying a solid line, rather than a dashed line, whilst leaving the other browsers to display a dashed one.
Essentially,
If Firefox,
border: 2px solid #000000;
-moz-border-radius:10px;
If any other browser,
border: 2px dashed #000000;
-webkit-border-radius:10px;
border-radius:10px;
I am fairly new to CSS and haven't dealt with browser specifics yet. If anyone could help (or point out problems to this method!) then I would be very grateful.
Thanks
If FireFox is bugging out, it may be worth going down the route of images for firefox.
You could have some classes:
.tr, .tl, .br, .bl {
display: none; /* Don't show for normal browsers. */
}
#-moz-document url-prefix() { /* Activate for FF. */
div { /* Probably best to tie this to a class / id. */
position: relative;
}
.tr, .tl, .br, .bl {
display: inline;
position: absolute;
}
.tr { /* top right */
background-image: url("curved_top_right.gif");
top: 0;
right: 0;
}
.tl {} /* top left - Use .tr as a ref */
.bl {} /* bottom left - Use .tr as a ref */
.br {} /* bottom right. - Use .tr as a ref */
}
Then in your Html
<div>
<div class="tr"></div>
<div class="tl"></div>
<div class="br"></div>
<div class="bl"></div>
</div>
Not ideal but might help you as FF is bugged.
You can do this a few different ways.
You could add a conditional stylesheet for firefox. This is a little overkill for just a couple styles.
You could use a CSS hack. This is not the best method since it relies on a browser bug (that could be fixed).
You could use a javascript or PHP function to parse the user-agent and append the os, browser, and version to the body or html tags as classes. Then you can write the styles with the correct class.
You could submit a bug report and pray.
Hope this helps! Good luck!
The short answer is no, that's not really possible.
The ideal solution is for Firefox to fix the problem and the issue to just go away. It looks like a fairly obvious problem, so I would assume that the Mozilla team know about it; it might be worth your time checking the Firefox issue tracker to see if they've got a ticket for it and whether it's had any work done on it. Given their rapid release cycle, there's a chance it may be fixed relatively soon, you should check this -- one thing you don't want to do is spend ages fixing your site to work around it, only to find it's a non-issue by the time you've done the work.
Having said that, the effect does appear to be deliberate by the browser: I recall that earlier versions of Firefox did show dots on rounded corners, so there may be some sensible reasoning behind it. I agree it's not ideal though. But if it's a standard feature of the browser, why not just run with it and let Firefox users have it the way Firefox wants to show it? (it doesn't look that bad, does it?)
On the flip side, of course, a question that might be asked is that if you're happy to have a solid border for Firefox users, why not just make it solid for everyone? That would seem to be the simplest answer.
Assuming you do still want to resolve it, in terms of work-arounds, I would strongly advise you to shy away from browser hacks or user agent parsing; both these solutions are brittle and could lead to problems. Obviously, in this case, the worst that is likely happen is the wrong border being shown, but nevertheless, you should be wary of both techniques.
One suggestion would be to try out border-image instead of border-radius.
border-image is a relatively new and little-used CSS feature, which allows you to construct your borders using images. (you'd never guess from the name, right?)
The beauty of border-image is that you can do pretty much anything you like with your border. If you want a specific dotted pattern, then just create an image with that pattern of dots; problem solved.
The syntax is a bit fiddly, and it works best with SVG images, but I'm sure you'll get it after a bit of experimentation.
As you can probably tell, it's a very powerful feature. The main reason it's little-used is because it's new. This means it doesn't have great browser support, but for you that really shouldn't matter because you'll be drawing borders that look relatively close to the standard border-radius effect, and you can use the standard border-radius as a fall-back. The one browser that you do want to affect (Firefox) does have support for it, so it should solve the problem.
Yes, I agree, it's a slightly complicated answer to a simple question, but it may be a way to make it work reasonably consistently across all browsers. Worth a try anyway.
This is probably a css3 transitions thing but I don't know css well enough to create this. Mainly what I would like to do is make a button grow in size (125% of the original size) for a couple of milliseconds and then revert back to the original size before the page goes to the next page. Is this possible with css/css3/transitions and if so, how would this be done?
Thank you!
Make your button an <a> and use the :active pseudo-class to do the expand effect. An easy way to do this without messing up layout is the outline property.
Demo:
CSS:
.button {
background-color: black;
border: 1px solid black;
color: white;
display: inline-block;
padding: 5px;
}
.button:active {
outline: 10px solid black;
}
HTML:
<a class="button">press me</a>
Mozilla Developer Network has a great introduction tutorial on CSS3 transitions. I recommend stepping through some of the samples and source code to see if that helps you figure out what you're trying to do.
As for timing the length of your animation - you should easily be able to adapt the "transition timing effect sampler" from the link above and try out different timings until you get the effect you're looking for.
For such a fast effect transitions is not needed, just change the size of the element.
A couple of milliseonds is not enough to make the effect visible. Anything less than 20 ms. is not visible at all, because the screen doesn't update fast enough to show it. Around 100 ms. is needed for it to look like a deliberate effect, and not just a glitch.
Example:
$('input[type=button]').click(function(){
var e = $(this);
e.addClass('grown');
window.setTimeout(function(){
e.removeClass('grown');
}, 100);
});
Demo: http://jsfiddle.net/Guffa/GEHCZ/
Sometimes we try to write the CSS Style Sheet with the less lines possible.
Let's look at this example:
Note: Previously borders where all width:1px, border-style:solid and border-color:#000
Scenario:
We want to change:
the width of: R, L and B to 0px
the border-color of: T to #ddd
Code Used:
border:0 solid #ddd;
border-top-width:1px;
What did the code above did unnecessarily?:
changing the border-color of: R, L and B (3 actions)
changing the width of: T (1 action)
Here is the code with 0 unnecessary actions:
border-right-width:0;
border-bottom-width:0;
border-left-width:0;
border-top-color:#ddd;
The question is: should we sacrifice efficiency for less-code/readability?
The efficiency loss will not be measurable, if any.
It is always better to write well readable code.
And in the end you first example's file size is less, so downloading the CSS is quicker.
should we sacrifice efficiency for less-code/readability?
Yes! If you want efficiency, compress your code, but always have a fully readable, easy to modify, clear and to-the-point, source version.
And it's usually best to have zero inline styles. If it's just one element, give it an id and put the style for it in your CSS file.
In my opinion, rewriting CSS is part of CSS.
As for efficiency, I don't think you will notice a measurable difference (with the exception of download times) in between the two.
What is important is to be consistent, and make your code readable.
As for your example, I would have done:
border:none;
border-top:1px solid #ddd;
Simply because I feel that makes it more readable
I think you're asking the wrong question. The sample you provided is not going to result in much of a difference at all between download-times or the time it takes to render the page. I think any web-developer's main focus should be on making the code easily readable to at least themselves, and preferably to others.
I would have done this:
border-width: 1px 0 0 0;
border-style: solid; /* may not be necessary as many browsers use this as default */
border-top-color: #DDD;
It's short, and not very cryptic as to what the display is like, and doesn't do anything unnecessary.
As for compression: not sure what the authors meant by it but if you minify the code, the browser at the other end won't "unminify" it to read it like we would want to. Empty space is ignored anyway, and if not there, that probably even speeds up the parsing...