For example, if you look at the image here:
Is it possible to create the love' hate part? where the hide text is a little-but underneath the Love text? And also, how can I cross out the hate text?
yes, it is possible, but I don't recommend doing it that way
for the stroke: simply create an element and rotate it a bit
for the "underneath" look: use position: relative (absolute), margins, paddings etc.
here is live example: http://jsfiddle.net/78qpE/1/
If you want the image to look like the one you attached, it would be done in a program like Illustrator, but it is unclear if this is what you want. Can you elaborate at all, or provide code for what you are trying to do? It is possible to have both "Love" and "Hate" in separate DIVs, positioned by CSS. If it is only text, there are CSS controls for strikethrough as well.
Related
I am trying to make a responsive circle in CSS.
It has to be activated as a link.
When you hover over the circle, the background color needs to change.
In some circles there need to be two text lines.
I found this example script. But unfortunately it is not a link yet:
http://codeitdown.com/css-circles/
As well the following example:
http://codepen.io/anon/pen/cqoFv. Which is not a link yet as well.
So, only the circle needs to be a link.
Your help is appreciated. Thank you very much.
Some like this?
http://codepen.io/anon/pen/zAaGe
Just easy css.
:hover,visited.
I have this wireframe that I am working from:
http://comehike.com/MOCKUP3.png
and on the top banner there are two sections like "find a hike" and "plan a hike"
How can I make letters like that? They are white, but have a brown layer around them. I am not sure how to do that.
Also, what font is that? Is it supported by most browsers?
There is a css3 property called text-stroke which does exactly the same thing you asked. The easiest cross-browser solution would be an image.
More on text-stroke: http://www.cardeo.ca/2010/adding-an-outline-to-your-text-using-the-css3-text-stroke-property
You can't get a stroke to look like that with pure CSS. Unfortunately, that is a a photoshop effect and you won't be able to do that with live text.
Same goes for up in the nav. That looks like a bezel effect, so you'll have to recreate that with an image.
You might also consider <canvas> to show-off your Bezier talent :)
in my header I've got a large image. Above that image I want to place my navigation.
The clue about it: The ul-Navigation-element got a gradient background. But if I hover an li-Navigation-Link I would like to display the underlying image! (Hope that's clear? Otherwise I'll do some photoshop to demonstrate) This should be flexible, meaning not to give each li-Element a specific snippet form the backgroundimage.
I would prefer a JS-solution instead of a messy markup. But I appreciate every possible idea you have on your mind. Maybe I'm just overlooking the most obvious and easy solution..
Best regards (:
Here is an image of what I tried to descripe. Hope it helps:
http://s7.directupload.net/images/110226/pv4v4c5r.jpg
There's no need for JS to do this, simply make it so that when you hover over the li-Navigation-Link, the element doesn't have a background attribute set.
This will create the 'transparency' that you want to achieve.
you can use background:transparent for a:hover. This will show the background.
(for internet explorer you could use filter:alpha(opacity=100) );
Here an example: http://jsfiddle.net/3C9sZ/2/
I just solved my problem with javascript/jquery. It can be found here http://jsfiddle.net/QwJKY/.
I am designing my first website.
I have designed a button image in gimp and saved it as a jpg.
I want to use this button for my navigation buttons on the site. Should I make a separate image(jpeg) for each button or is it possible to just use one image and then overlay text on top of the images on the page using HTML? What's the best practice here?
Usually in this case you use just CSS by setting background property of elements that should be your navigation buttons.
For example you could have a ul:
<ul>
<li>Button1</li>
<li>Button2</li>
<li>Button3</li>
</ul>
and then just style it in you css by using background-image or similar styles, take a look here for some examples..
You're asking a question more about design than about coding. If you can implement your desired design by developing a single button background and then overlaying text in a standard font, do it! More broadly: don't put text in an image if you're just using a standard font.
On the other hand, if you want a fancy swirly font that can only be depicted in an image, you'll need to create a specialized image for each button with that button's text.
In that case, be sure to insert the image purely with CSS. Never, ever embed an <img /> tag with a textual button on a page.
Definitely reuse the images and overlay text. For ideas on how to do this, look at this tutorial:
Image button overlay text tutorial
Also, you mentioned using jpg. Consider using PNG instead for the button images, unless they are "real world" images. For simple gradients and solid colors, PNG is the way to go.
I havent seen the image but I generally try to Use CSS for as much of the graphical design as possible. Button generally tend to be very simple in design. However if you must use an image you can assign a background to a tag and then use text in the tag. Example would be to assign a background to a
<button class="myButtonClass">MyButtonText</button>
<style>
.myButtonClass {
//enter your button style here.
}
</style>
Depends on how you've designed you site, as always theres loads of ways to do everything.
If your buttons are just static i would recommend using images, theres no harm doing it like this.
<span>Your button</span>
then you can use the css to set the image background.
.home{display:block; height:20px; width:40px; background:url(image.gif);}
and your also gonna need to hide the text in the span.
.home span{display:none;}
Theres no harm in using simple text either, most of the time its personal preference.
Just leave ou the .home span{display:none;} and replace it with something to centre the text in the button.
As mentioned in another answer its also good practice to wrap your images in list items. Might sound wierd at first. But in practice its the best way.
you can put the image as backgroud...
I've downloaded the following template:
http://www.styleshout.com/templates/preview/Refresh11/index.html
But unfortunately, it has rounded corners and shades. I want it to have square corners and the shades should be removed, too. It should look like this:
But I'm not good enough at (X)HTML and CSS so I didn't manage to achieve this.
Could you please help me? How could I remove the rounded corners?
Please don't say "Take another template" ;) It's also for learning purposes :)
The rounded corners and shadow here are accomplished by images, not code:
http://www.styleshout.com/templates/preview/Refresh11/images/header.jpg
http://www.styleshout.com/templates/preview/Refresh11/images/menu.jpg
http://www.styleshout.com/templates/preview/Refresh11/images/content.jpg
http://www.styleshout.com/templates/preview/Refresh11/images/footer.jpg
If you have control over the file system, you can simply edit these images to have square corners and no shadow.
If its an image and you have access to it, as said above, you would simply put the image in photoshop,illustrator, or flash and alter to your liking. Taking out the shadows or making it look anyway you like. Assuming you are familiar with these programs.