I'm making an iPhone lockscreen based on this image.
So far, what I've come up with looks like this.
Although, they look pretty similar in terms of layout the first one is slick and other rather ugly :P. I believe this as everything to do with the smoothness of the text borders. (Believe it or not, the font is exactly the same!) I'm now using this:
text-shadow: -1px 0 #585858, 0 1px #585858, 1px 0 #585858, 0 -1px #585858;
But as you can see it doesn't look great. Is there a way to add some kind of anti aliasing?
Here's a short demo:
<html>
<head>
<style type="text/css">
body { position: absolute; background-color: #000; font-family: Calibri; color: #fff; text-shadow: -1px 0 #585858, 0 1px #585858, 1px 0 #585858, 0 -1px #585858; }
#clock { position: absolute; width: 290px; top: 50%; margin: -0.7em 0 0 30px; font-size: 53px; }
#day { line-height: 0.8; font-size: 0.9em; }
#date { position: absolute; margin-top: 18px; line-height: 0.6; font-size: 103px; }
</style>
</head>
<body>
<img src="http://tiny.cc/47nz6" width="320" height="480">
<div id="clock">5:30 AM
<div id="day">Wednesday
</div>
<div id="date">14 Dec
</div>
</div>
</body>
</html>
With out providing a demo I cant really test this, but you could try something like:
font-smooth:always;
or
-webkit-font-smoothing: antialiased;
Related
I am working on a design where I would like to have the background of text be as a block of text specific to the word themselves (As per example 1). When I decrease the leading. That is, make the line-height tighter and closer together it runs into issues and crops the letters above it.
Searching for a better approach so that I can have tight leading and a maintain the nice block background.
.example1 {line-height: 1.4}
.example2 {line-height: 1.1}
.box { margin: 0 0 50px 0; padding: 0; font-family: helvetica, arial; font-weight:bold; font-size: 40px; width: 550px; }
.box > span { background-color: #060055; color: #ffffff; box-shadow: -10px 0px 0 10px #060055, 10px 0px 0 10px #060055, 0 0 0 10px #060055; box-decoration-break: clone; }
<div class="box example1"><span>Testing anything<br> here. Testing anything here. <br>Testing anything here.</span></div>
<div class="box example2"><span>Testing anything<br> here. Testing anything here. <br>Testing anything here.</span></div>
You need to add style display: inline-block; on span element.
Wrap your text in another <span> and give it position: relative;.
Edit: Yudiz_Webdesign's solution is better, but I'll leave this here as an alternative.
.example1 {line-height: 1.4}
.example2 {line-height: 1.1}
.box { margin: 0 0 50px 0; padding: 0; font-family: helvetica, arial; font-weight:bold; font-size: 40px; width: 550px; }
.box > span { background-color: #060055; color: #ffffff; box-shadow: -10px 0px 0 10px #060055, 10px 0px 0 10px #060055, 0 0 0 10px #060055; box-decoration-break: clone; }
.box span.inner { position: relative; }
<div class="box example1"><span>Testing anything<br> here. Testing anything here. <br>Testing anything here.</span></div>
<div class="box example2"><span class="outer"><span class="inner">Testing anything<br> here. Testing anything here. <br>Testing anything here.</span></span></div>
I am having real trouble trying to track down a blue border in a site at the min http://innovativeapps.dk/ you will see on top of the video its their but when I look on the css i cant find it.
.video-container .description .inner {
/*background: rgba(255, 255, 255, 0.79) none repeat scroll 0 0;*/
border-radius: 4px;
color: #ffffff;
font-size: 28px;
font-weight: bold;
line-height: 42px;
margin: 0 auto;
padding: 8px 25px;
width: 68%;
}
Would anyone know where it is it almost looks like its in the video.
Look at the code, there is a blue box shadow box-shadow: 0 0 7px #1E70B9; under .navbar-default in your custom.css file line no.47..
There was a shadow given in navbar-default in your custom.css file line no.47
.navbar-default {
background: #ffffff none repeat scroll 0 0;
box-shadow: 0 0 7px #1E70B9; /*This is a blue shadow*/
position: fixed;
top: 0px;
}
Box shadow is used to make border like shadows for any container mostly.
Its like text-shadow for text.
navbar-default {
background: #ffffff none repeat scroll 0 0;
**box-shadow: 0 0 7px #1E70B9; //this line make the blue shadow.**
position: fixed;
top: 0px;
}
I have been working on a project that involves custom scroll bar here is the code
.scrollbar
{
margin-left: 30px;
float: left;
height: 300px;
width: 65px;
background: #F5F5F5;
overflow-y: scroll;
margin-bottom: 25px;
}
.force-overflow
{
min-height: 450px;
}
#style-2::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
#style-2::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}
#style-2::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #D62929;
}
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<body id="main">
<div class="scrollbar" id="style-2">
<div class="force-overflow"></div>
</div>
</body>
the problem is it is only working on chrome how can i make it work on every browser. i have searched all over the internet but still cannot fine any reliable solution.thanks in advance
Sorry friend firfox, Opera Mini & Edge not supported scrollbarstyle
YOU can check it here
check it
-WebKit- applies to Chrome and safari, not sure if other browsers support custom scroll bars but I think they don't
I have the problem that my text is not responsive, i tried to delete the text, the image is responsive, just the text is not..there is a white border.
i dont know how to fix that problem, it hink there is something with my css code, but i dont know what.
#stage {
background: url('../img/ozadje.jpg') center center no-repeat;
background-size: cover;
position:absolute;
color: white;
height: 100%;
width: 100%;
display: flex;
align-items: center;
}
#stage-caption{
font-size: 1.4rem;
font-weight: 200;
max-width: 80rem;
margin: 0 auto;
}
#stage-caption h1{
font-size: 3.5rem;
color:silver;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
font-weight: bold;
text-transform: uppercase;
line-height: 150%;
}
#stage-caption p{
color:silver ;
font-size: 2.5rem;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
font-weight: bold;
text-transform: uppercase;
text-align: center;
}
<div id="stage">
<div id="stage-caption">
<h1 class="display-3">
THERE'S ONLY ONE MIHAEL SOBOČAN, WEB DESIGNER & PROGRAMMER!
</h1></div>
</div>
screenshot of the problem
http://i.stack.imgur.com/FBKyO.png
Well to be honest, it only starts happening once you get down to really small screen sizes.. so it may not be worth even worrying baout really.
BUt the problem is that the word 'PROGRAMMER' is too long to get any shorter, and pushes the width of the viewport out further.
So your solution, if you really are worried about it, is to reduce the font size with a media query under 768px.
#media (max-width:768px) {
#stage-caption h1 {font-size:1em;}
}
I can't understand why the text I'm trying to get in the bubble box won't be there.
Here is the link to a picture of what I see
I'm super newbie and this might be a very stupid question, but I spent like 40 minutes trying to figure out what's wrong.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.bubble
{
position: absolute;
width: 230px;
height: 33px;
text-align: left;
font-size: 10px;
line-height: 100px;
background-color: #00ff00;
border-radius: 10px;
margin-top: 100px;
margin-left: 200px;
}
.bubble:after
{
content: '';
position: absolute;
width: 0;
height: 0;
left: 20px;
top: 33px;
border: 22px solid;
border-color: #00ff00 transparent transparent #00ff00;
}
</style>
</head>
<div class="bubble">im lemon im a little spaghetti</div>
</html>
Help
You should define line-height: 33px, because that is the height of your bubble
See fiddle
I suggest you add a bit of padding, so that the text won't be stuck at the left border of the bubble. Like that :
padding: 0 5px;
That will add 5px of padding to the left and to the right, that is a shorthand for :
padding: 0 5px 0 5px; which is itself a shorthand for
padding-top: 0;
padding-right: 5px;
padding-bottom: 0;
padding-left: 5px;
See updated fiddle
Looks like its overlapping. You should look at this example, there are variety of layouts and other css options to accomplish what you're trying to do covering multiple browsers.
http://nicolasgallagher.com/pure-css-speech-bubbles/demo/
Here is the CSS for the first bubble text:
.triangle-isosceles {
position:relative;
padding:15px;
margin:1em 0 3em;
color:#000;
background:#f3961c; /* default background for browsers without gradient support */
/* css3 */
background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
background:-moz-linear-gradient(#f9d835, #f3961c);
background:-o-linear-gradient(#f9d835, #f3961c);
background:linear-gradient(#f9d835, #f3961c);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
/* Variant : for top positioned triangle
------------------------------------------ */
.triangle-isosceles.top {
background:-webkit-gradient(linear, 0 0, 0 100%, from(#f3961c), to(#f9d835));
background:-moz-linear-gradient(#f3961c, #f9d835);
background:-o-linear-gradient(#f3961c, #f9d835);
background:linear-gradient(#f3961c, #f9d835);
}
The complete CSS:
http://nicolasgallagher.com/pure-css-speech-bubbles/demo/default.css
Basically you'd put the text inside the paragraph tag by calling the class:
<p class="triangle-isosceles">This only needs one HTML element.</p>
#ref: http://nicolasgallagher.com/pure-css-speech-bubbles/demo/