I have this kind of pattern
http://i.imgur.com/O99Vw.png
in big part of PSD, and how would you set this kind of pattern to be background on HTML page. I shouldn't take bit picture right?
Also I tried to cut a peace and repeat it, but it doesn't match, it looks bad and it's distorted
Try this one:
I've just cut a square out of the image you sent and it looks ok IMO.
Since we are not aware of the kind of pattern you have, here are some suggestions.
You can use CSS3 patterns if site supports only modern browsers.
If its a pattern sure you can cut a small piece from it & can repeat.
Some links may help
http://lea.verou.me/css3patterns/
http://www.patternify.com/
http://subtlepatterns.com/
http://24ways.org/2011/css3-patterns-explained
http://bgpatterns.com/
Check out this link http://lea.verou.me/2010/12/checkered-stripes-other-background-patterns-with-css3-gradients/ if you are allowed to use CSS3. This will get you the desired effect you want.
Try this: http://www.stripegenerator.com/
CHECK this:: patternify.com
i make a bg image similar to yours with this tool, in fact is so easy n__n
Related
I just want to ask how did the developer do the animation of his name combining together from right to left? I just want to implement it myself to enhance my css skills.
Seems like he used GSAP ScrollTrigger here if I'm not mistaken.
https://www.danielspatzek.com/degenesis
Here is an incomplete jsFiddle that will hopefully point you in the right direction:
http://jsfiddle.net/86wkz3qu/19/
This example doesn't use scrollTrigger but I would highly recommend using it for something like this.
NOTE: Make sure the result display window is 870px for this example to get this sort of thing to scale I would try using vw instead of %
Sorry I can't spend more time on this- but good luck! :)
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.
I would like to know how I can create a colored canvas but with transparent parts with the font. I want the font to create a hole in this canvas. Is this possible and how ? My goal is to create the impression that an image is embbed in a font...
Thank you :)
<canvas> offers something called composite operations for cut off and such effects. I believe the operation you want is called destination out:
https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html
And here is some more technical details in the spec:
http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#compositing
I cannot provide you an actual working code (your use case is pretty rare), but you should be able find a globalComposite tutorials and with little playing with their code you can find out how to apply the operation for your case.
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.