Hey guys I have a question, I plan on making a website for a friend that wants a nice description about them, for in terms of design they want something like this:
dsdsdsds
sdsdsdsdsdsdsd
sdsdsdsdsdsdsdsdsds
sdsdsdsdsdsdsdsdsdsdsdsd
sdsdsdsdsdsdsdsdsdsdsdsdsd
sdsdsdsdsdsdsdsdsdsdsdd
sdsdsdsdsdsdsdsdsdsd
sdsdsdsdsdsdsds
sdsdsdsdsdsd
sdsdsdsd
So basically small line of text at the start, and increase for the middle, then decrease in size near the end, so basically a circle type. Any ideas?
One bad way is to have a fixed number of lines (and maybe no word-wrap). Just do spans and have the id's of each span have a pre-defined width.
A better (somewhat) way is to do something along these lines css circle via stack-overflow. You may have to tweak it though (and I haven't tried it), but you could play around to see of you like it.
I'm pretty certain the latter is the way you would go, but the ease of constructing it may not be overly fast.
Good luck!
After looking around in Google, I have found this:
CSS Text Wrapper
It involves javascript, but you dont really need to know javascript in order to use it.
if you want to achieve that use
<pre></pre>
then apply the css to the text.
Its the easiest way to do that.
Related
I want to know how to draw a text like this style ( curved) using only CSS please help me
It isn't super straightforward, but I suppose it could be done. Take a look at this article: Set Text on a Circle. Not the exact same thing, but same idea. You'd need to do it per character or section of words to do it.
A potentially easier solution would be to use Javascript/jQuery. But I know this doesn't meet your CSS only requirement. Consider looking at ArcText.js as an option if you feel CSS isn't doable for you.
There is also a tool that does this for you: CSS Warp - CSS Text to Path Generator. This would match exactly what you want, and generate the code for you for various browsers. I've never used it before, but seems nearly fool-proof.
Here is an example using CSS Warp. I spent about 5 minutes. It gets you pretty close to what you want, and you can polish it up more. Then just use CSS to add the rest of the styling.
I am really hoping someone can help me. I am trying to create a round menubar in CSS and I've searched and searched for solutions but have found nothing. I know how to create round areas (by setting the radius), and I know how to create a simple straight line menu using <ul> & <li> but, as said, I want to create a round one.
there is a picture of something alike what I'd love to get working:
If anyone could help me on this I'd be so thoroughly grateful.
Closest things I know of are these:
http://www.cssplay.co.uk/menus/cssplay-round-and-round.html
http://codepen.io/tgrant54/pen/lBHwK
Is that what you're after?
This menu looks almost like Path's Button.
You can find the link to Path's Button here.
You just need to modify it a bit so the menu displayed in full sphere.
This isn't something you really want to be doing in pure CSS.
You may be able to make circle shapes with border-radius, but you're not actually making a circular object -- it's still a regular box shape as far as the browser is concerned, just with the corners rounded off. This has absolutely no bearing at all on your ability to do anything else to do with circles or curves in CSS.
Yes, it's possible to do something along the lines you're after, by putting every character into its own element, and styling each of them with a specific position, but that's going to be painful, inflexible, and difficult to work with. If you really want to do this, there's a code generator you could try out here, but I'd say you're barking up the wrong tree.
If you want to do this kind of thing properly, what you really need to be thinking about is doing it in graphical format, using either Canvas or SVG, plus plenty of javascript code.
I'd suggest looking into a JS library like Raphael for this; there are people who have tried similar things already using Raphael, which may help you -- see here, for example: Radial Pie Menu With Raphael JS
Hope that helps.
A while ago I found an article which discussed a solution to an alternative to the traditional way in which CSS sprites are used and designed.
A common issue is that you need to leave space around a part of the sprite if you don't want to accidentally have other parts of the sprite "bleed" into certain elements. Thus you can use diagonal layouts and things to alleviate this problem, but they all require a lot of open white space.
This article demonstrated an alternative which let you create zero white space sprites, and let you define the exact area and dimensions of the image you want to use without worrying about bleeding. I believe it used the CSS content property in the method, but I can't be sure.
I really want to find this article again but I can't seem to find it :(
I'm sorry for my vague description, but for anyone else who saw the article, they'll know what I'm talking about. Any help finding the link? Thanks!
I think what you're referring to might be creating font icons. It allows you to have retina-ready images, while at the same time restricting you to 1 color. There are currently two good solutions to do that:
http://fontawesome.io
http://icomoon.io
There's also the way of creating SVG modifiable shapes, which in turn allows you to use shapes of almost unlimited colors and complexity. This solutions however is not perfect, as it's based upon SVGs, which are not supported by older browsers
I've had immense trouble googling this, I guess I don't quite know the name for the concept. I have a section of the page where a series of text boxes will appear, the number might vary. I'd like to have them fill a div in a top-to-bottom then left-to-right manner. That is, the text boxes will stack (normal) until they reach the bottom then wrap around to the top again in a new column.
Like:
Textbox1 Textbox4 Textbox7
Textbox2 Textbox5 Textbox8
Textbox3 Textbox6
Is that possible in CSS, or will I need to actually code something to do this correctly?
You can use CSS columns, which is described on A List Apart.
Note that this only works in modern browsers. Otherwise you need JavaScript or extra HTML.
You want to Google "multi-column lists" using CSS.
I personally call this newspaper columns, and there is support for this in CSS 3
As mentioned, CSS3 allows for this, though browser support is going to likely be mixed.
It wouldn't be too hard to do via JavaScript, though.
I'd love to know how long a string is when it appears on the screen. We're not using a fixed width font, so:
"Our mother's tummy makes dummy noises."
is much wider than:
"Lilly Leadbetter lives life leisurely."
Is there a way to tell how long something is by the characters? I don't need pixel perfect accuracy, just long enough to ellipse at roughly the right spot. CSS overflow won't help, because I can't attach the ellipse after CSS has determined how long it is.
Here's a related question with at least a partial solution. Basically the technique is to render the text in a hidden <span> and then (using JavaScript) measure the pixel width of the span, then chop off characters until it fits in your target width.
And here's a jQuery plugin that encapsulates this sort of functionality, linked from this related question.
Ordinarily I'd agree with fsb that you have to understand that on the web you don't have pixel-perfect control over everything. It's not print. Choose a reasonable length and chop it off server-side, you can avoid chopping in the middle of a word to make it look a little better.
If you insist on a perfect length though, check out ThreeDots, a jQuery plugin.
Unless you're using a fixed width font, I don't think there's any simple way to tell. Perhaps the easiest way is to render the candidate text and see how long it is.
Server-side, this is a bit hit-and-miss because you don't know for sure what the browser is going to do with the text. You could use GD (or something like that) and your best guess what font and size the browser will use but is it worth the trouble when you can't trust your guesses?
Client side in javascript (or whatever) you can have the browser render the text and look to see how long the rendered DOM object is (as Jordan said).
One solution, though perhaps very hard psychologically, is to understand that web page rendering is not typography. You do not have control. You do your best, accept the limitations and move on to the next problem. Technically simple but maybe hard to accept.
You can use the truncate helper function. Even if you know about the visual length, you cannot probably optimize it for all browsers/browser window resizes.