I am learning Ruby on Rails to create a website, and I am looking for a way (preferably most conventional one) to create white rectangles that will cover the back of texts only (To make it easier to read).
I have good previous knowledge of java, C and python like languages however I am completely unfamiliar with RoR, HTML, CSS.
I simply finished the following blog tutorial and just added a background.
http://guides.rubyonrails.org/getting_started.html
Therefore I don't have any relevant code to share, its just the basic stuff.
I would also appreciate further tips on how to have better control over the figures I will draw (how to make corners slightly rounded, how to make the rectangle size slightly larger than the text size etc.)
It feels like you want to draw a poster as if using Adobe Illustrator or something like that.
For WEB design, you shouldn't reason like this. Think of your webpages mainly as a collection of containers that squeeze and adapt to your content.
create white rectangles that will cover the back of texts
This is just going to be the background of your containers. But if you really want something that is only covering the letters, you could try something like
HTML :
<span class="white-shadow">Your text</span>
CSS
.white-shadow{
background: white;
}
make corners slightly rounded
It's a CSS property called
.your_class{
border-radius: 2px 2px 0 0; // Round corners of 2px radius for top left/right corners
}
make the rectangle size slightly larger than the text size
You actually want to add some padding to your containers
.container{
padding: 5px 10px 5px 10px;
}
If you don't understand any of this, I strongly recommend you to follow a HTML/CSS tutorial.
I see I'm a few minutes late to this party, but just in case this helps:
<!DOCTYPE html>
<html>
<head>
<title>SO30947882 Test</title>
<style>
body { /* The entire page's <body> element */
background-color: gray;
}
* { /* Every element */
color: black;
}
.my-text { /* Elements with this class property */
background-color: white;
padding: 2px;
line-height: 1em;
margin: 0 1px;
border-radius: 2px;
}
</style>
</head>
<body>
<p>Hard to read this.</p>
<p class="my-text">Easier to read this, in a block.</p>
<p>
<label>Dark text.</label> <label class="my-text">Better text, inline.</label><br/>
<label>M<span class="my-text">ixe</span>d T<span class="my-text">ex</span>t.</label>
</p>
</body>
</html>
This is some really fundamental CSS style definition stuff. CSS selectors (like body and .my-text here) are incredibly powerful, since they naturally combine.
Happy styling.
Related
So rather than code dumping, I'll just link a reference to the types I've seen so far.
https://www.html.am/html-codes/marquees/html-marquee.cfm
While these are fairly close to what I want, they're just not quite right. The closest one to what I'm after is the bouncing text... But these are all made based on a container that's bigger than the text.
How can I get my text to scroll left and right only when I have text overflow? (https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow)
I thought all this would be possible in css. But if not JS would be fine.
div[type=text] {
border: solid 1px black;
height: 20px;
width: 100px;
font-family: sans-serif;
overflow: hidden;
}
<div type="text">abcdefghijklmnopqrstuvwxyz</div>
Solving the Design Issue
Deliberately designing your content to not fit within view might actually be the fundamental issue to solve here. Maybe it is better for users to show the content visibly without any need to scroll, animate, or script it.
There are many reasons not to animate stuff on your web page from problems you cause for groups of your users, to the pure distraction of moving things.
So, my main answer is you probably ought to design a different solution (such as, giving content enough space).
You'll find almost universally that the marquee tag is to be avoided (and that doesn't mean using a different tag and then animating it with CSS or JavaScript). However, we can still have some fun theoretically, just avoid in real life as it is deprecated.
Fun With Marquee
You can use alternate, with some additional non-breaking spaces to show the content in a visual feast of sliding text. I don't think this is good for your users, but marvel in the potential to have lots of moving things.
div[type=text] {
border: solid 1px black;
height: 20px;
width: 100px;
font-family: sans-serif;
overflow: hidden;
}
<div type="text"><marquee behavior="alternate"> abcdefghijklmnopqrstuvwxyz </marquee></div>
I really don't know how to name my problem but I have a psd file that looks something like this:
Every item in the image above is a single image like this one:
I don't have a good specification about this, that's all I know about it. So I have been thinking maybe I can use the whole image as sprite background.
Please share your thoughts how to achieve something like this and if you are familiar please edit the question name precisely cause I could not.
Thanks
Here is an great article which accomplishes this using text-shadow: 7 Great CSS based text effects using the text-shadow property
Here is an example how it looks: Hello World example
Code:
h1 {
text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
color: #9c8468;
opacity: 0.3;
font: 80px 'Museo700';
}
I didn't include the right font, but you get the idea.
This is what you do... I just did this in Photoshop, and the results are pretty good. It can be duplicated in CSS.
<img src="http://i.stack.imgur.com/o1z9H.png" id="front"/>
<img src="http://i.stack.imgur.com/o1z9H.png" id="middle"/>
<img src="http://i.stack.imgur.com/o1z9H.png" id="back"/>
Each of those images should be a different color. Front, as it is. Middle, dark gray, and back, white.
Use CSS is place them in the same spot, but offset by a couple of pixels.
#front {
top:5px;
left:5px
}
#middle {
top:3px;
left:5px
}
#bottom {
top:7px;
left:5px
}
CSS now has filters. (not yet fully supported)
view example
view notation
You can use drop-shadow
box-shadow even with transparent .svgs kept the retangular shadow.
works like text-shadow but for vector images (.svg)
side note: Since it's not yet fully supported, use an image editing software.
I believe this is a pretty basic question for someone who knows CSS language (not my case lol). I'm using this code hosted at jsfiddle to make some speech balloons in my website. The problem came when the message inside the balloon is little. For example, in the code posted above, change the code from "bubble you" balloon to something like:
<div class="bubble you">Hi.</div>
You will see that the balloon stay on the same horizontal line as the previous balloon, and this is ugly and strange. I want the balloons to stay one after another (one below another) even when the message is small like a simple 'Hi'... What properties should I change or add in the balloons classes to get this?
Add clear: both to .bubble.
Demo here:
http://jsfiddle.net/sifriday/mek5Z/1957/
.bubble{
background-color: #F2F2F2;
border-radius: 5px;
box-shadow: 0 0 6px #B2B2B2;
display: inline-block;
padding: 10px 18px;
position: relative;
vertical-align: top;
clear: both
}
Right now we have a web page with a bunch of link sections on one page. Each section has a header like so:
This header background is actually two images. The first is just a rectangle and the second has the slanted side on it. As I was looking at this solution, I was wondering if I could solve this with CSS instead of images. While I am not a CSS guru, I did look at a number of examples and was able to get something similar working. However, when I attempt to put text on top of the background, it ends up above the color instead of inside it. The CSS I have also has a fixed size, which is less than idea. I would rather specify a percentage of the available area and have it fill in the color.
Here is the code I've been working with:
<STYLE type="text/css">
.mini_banner
{
display:inline;
border-bottom:30px solid blue;
border-left:0px solid transparent;
border-right:30px solid transparent;
}
</STYLE>
I wanted to apply this to a cell in a table. I also don't want to break compatibility with modern browsers. My "customers" (mostly internal people) are going to be primarily on IE8 or later but I don't want to limit myself if I can help it.
So first, is this possible? Second, how would I accomplish this? And third, is there a way to make it relative in scale instead of fixed?
I would say that you'll have less headaches all the way around if you revert to using a single background image - in this case, a white image with the notch cut out (a PNG-24 with alpha transparency). Make it bigger than you think you need by about 200%, then do something like this:
.minibanner {
background: blue url(..images/notch.png) no-repeat middle right;
font-size: 1.5em;
}
The reason is that relying on border sizes may result in some whackiness across browsers, and it will definitely look weird if any element runs to two lines.
If you make the notch image 200-300% larger, but vertically align it in the middle of the background, and you do increase the font-size, the box will grow, but your white notch will grow right along with it.
UPDATE:
The only other way I can see pulling this off is to add a non-semantic element, such as a or something similar, after your text:
<div>
<p>Hello text</p>
<span></span>
</div>
Then in your CSS:
p {
background: blue;
color: white;
float: left;
padding: 0 20px;
height: 50px;
margin:0;
line-height: 50px;
}
span {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 0px solid transparent;
display: inline-block;
border-left: 50px solid blue;
}
See this JSFiddle.
The shape is based on this tutorial on CSS triangles. Now, I've only tried this on a webkit based browser, and it works. You will have to adjust the heights every time you want to change font size, so that is a drawback.
I made it work without an extra span: jsFiddle
.mini_banner
{
width:18em; height:1.5em;
color:white; font-weight:bold; padding-left:0.5em;
margin-bottom:.5em;
}
.mini_banner:before {
display:inline-block; content:''; overflow:hidden;
width:17em; height:0;
margin-bottom:-1.5em; margin-left:-.5em;
border-bottom:1.5em solid blue;
border-right:1.5em solid transparent;
}
Tested in FF, Safari, Opera and IE. (Works in IE8, but not in IE7)
I'm trying to make a simple browser game without relying on anything fancy like flash or html5. I was doing pretty well in getting everything set up, but when I got to the ground I ran into trouble as I'm not very good at setting up html pages. I want to have a tiled ground that I can put objects on, then click on the objects to take the user to another page. I'm not sure how to go about something like this and am looking for some direction.
I have a fairly good grasp on PHP, understand basic html, very limited css and am starting to learn javascript and am planning on picking up jQuery.
I don't really understand what you want, but this might help:
Live Demo
To understand how the positioning works, see:
http://css-tricks.com/absolute-positioning-inside-relative-positioning/
http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
HTML:
<div id="gameContainer">
</div>
CSS:
#gameContainer {
width: 320px;
height: 320px;
border: 1px solid #000;
background: url(http://i.stack.imgur.com/sFV9k.png);
position: relative
}
.wall {
background: url(http://i.stack.imgur.com/IFjyp.png);
width: 32px;
height: 32px;
position: absolute
}