I want to achieve the look and feel as shown in the above picture. There is a completed image besides two lines of text. I know how to achieve this via putting image into background of css. But I am working in a Salesforce project and it is really hard to put images into css. So is there any pure html way in order to achieve this (the fonts and size are definitely css though). I have tried a lot but none succeeded.
The html code for a checkmark is & # 10003; and a heavy checkmark is & # 10004; (without the spaces).
Create a div around the checkmark and make it a circle: Draw Circle using css alone
...Otherwise you are stuck using a ballot-box checkmark: ☑ (& # 9745;)
Related
I am trying to replicate a design element and remove the image and hopefully replace it with plain HTML/CSS. Essentially I have a header > h1 that has a title in it. For example we'll say this title is "Stack Overflow", like so..
<header>
<h1>
Stack Overflow
</h1>
</header>
In my current CSS, the text-indent is pushed off the screen and a background is applied to the h1.
To replace that I'm using the -webkit-text-stroke: rule which works fine, albeit not being fully supported across all browsers. The problem with it is one that many Photoshop users come across when applying stroke to text and that is the position of stroke.
Let me demonstrate with a badly put together image: https://i.imgur.com/eQC9B5v.jpg - the top text shows stroke that is "outside" of the text, the bottom one uses what Photoshop calls "center".
It seems that -webkit-text-stroke based it's stroke on that "center" variant in Photoshop. I'd very much like it to replicate the "outside" option.
I can't see anywhere I can set this, and I'm guessing I can't but I'd be interested to know if..
a) there is a method, and if so what is it?
b) if there isn't a method, has anyone found a different way of achieving this?
Now I should say, I found this: https://www.petercarrero.com/examples/stroke which in turn came from a post posted on here in 2013 (CSS- webkit-text-stroke but stroke covers font-color)
On caveat here is that I believe SVG can control the stroke type and I would be interested to see any solutions that use it, but ideally I am not targetting an SVG solution.
Thanks in advance.
I already have a piece of css/html code which display 4 images, 2 per row, 2 rows, and logo in the middle of them all.
Now I need to add another set of 4 images right below the first 4 in the same format, with the same logo in the middle
Each image has some text added and a link in it, visible when hoovering over the image.
I've been trying to have it done but can't make it. Was wondering if you're willing to help me out.
My code is here
jsfiddle.net/Cristian_C/b9961995/1/
Thank you
I have no idea how to add the code for a link here
I'm not entirely sure why you're mixing inline styles with stylesheets, but you should (as a rule) avoid it, as it will make maintaining your CSS a nightmare (separation also makes the DOM more readable for you, too).
Because of the code bloat, I'm not sure if you have important styles in there that are essential to your markup; however, there's an easy way to achieve what you want to do by utilizing z-index, float and clear.
See my demo fiddle.
Background:
I'm trying to create a rotating image banner with several links, each link being different. The FIGURE are set inside a DIV which is nested inside another DIV for centering and positioning purposes.
Current JSFiddle:
Available here without WebKits.
Problem:
Although I tried with several combinations, inside the markup and CSS, never does it trigger the anchor in any of the images (I have not set any effect on hovering yet, not to confuse the code). I deleted the anchors so you can see the base code before the tests I did. It functions now as perfect Pic Slideshow, yes, but that is not the intent.
Need:
To know what to do with an A tag for it to work on each of the images separately, in order to transform the PIC SLIDESHOW into an alternative to a Slider.
Code type restrictions:
I do not wish to use a JQuery in the solution, only CSS, HTML and the smallest JavaScript possible if everything else fails
Many Thanks
I'm trying to get the black x mark to display on the same line as the second green rectangle. I tried using display: inline, but it still won't show up on the same line. Can someone help please?
http://jsfiddle.net/a4Cg4/1/
In the HTML code, moving the mark inside the element where it'll float is mandatory, if I understood what you want to achieve.
Then you use deprecated attribute align="center" and it complicates everything when trying to position the mark... Nonetheless here's a fiddle: http://jsfiddle.net/PhilippeVay/a4Cg4/5/
(modified CSS is at the top, first and second rule)
Unrelated to your problem but still: every HTML img needs an alt attribute, even if it's empty for decorative images (or when context like surrounding text already says what the image represent). I added it to the HTML code.
Wow, I could really use a hand with this one. I've got some #font-face text that needs an image mask on hover.
Off state:
Hover state
You can see that there's a fire background to the hover text, but ONLY on the next and not the entire item. I'm trying to avoid individual image rollovers so that this effect can apply to any text shown in the menu, but I'll resort to fixed images if I have to.
Is there any way to achieve this without photoshopping every single link?
Nope! Extract images from the photoshop file for both inactive and active states, then apply on css :hover!