Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I've been making a portfolio, And I didn't really limit myself to what would be easier to code.. So... I ended up with this (that's the homepage but almost every other page is ready too in photoshop)
http://postimg.org/image/z0w6wb4zb/
So what would be the best approach to turn this into HTML/CSS? Should I slice it into zones, or each layer separately (as in clouds, tree, island.. etc).. I was told to use semantic HTML but I'm not sure I understand what this means here.
and what do I do for the buttons? Image maps? wouldn't that be a bad idea?
Do you think this design is worth the trouble anyway?
I can't post a comment, the best I can do is answer, so here goes:
Mr. Lister is right, image maps would probably be the way to go. But, one more item that I think is worth noting, SEO value, particularly for Home/Portfolio/Contact Me/and About anchors. One potential solution is to use image-maps... but do some feature detection to see if the browser allows for the css rotate functionality.
Your HTML
<section class="homepage-navigation">
<a class="contact-me nav-link" href="/contact">Contact Me</a>
...
</section>
Your CSS could be
.home-navigation{position:relative;}
.home-navigation .nav-link{position:absolute;}
.home-navigation .contact-me{transform: rotate(-95deg);left:10px;}
So... there is a trade-off here. Using an image map and having your link text embed in the image is much easier... but you lose out on browsers seeing the anchor text. If you go the CSS route, you need to consider supporting both browsers that allow for the transform css property, and browsers that don't. :|
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed last month.
Improve this question
I'm trying to find ways to customize a website where I can only edit the content (text and image) via Contentful’s content management interface (the company that developed the website refuses to integrate the corporate identity and style guide and says it "might" be for future versions).
What do you think about adding HTML elements, inline CSS, or even adding style and loading fonts via style elements directly into the text fields? Given that these elements will obviously be in the middle of the body, is this really bad practice in terms of security and SEO (or other)?
Thank you a lot for your time.
I wouldn't say it's bad for security since it's just style (meaning how the users see the website).
Have you thought about linking the style file? It would maybe be a cleaner solution (don't forget you will have to maintain it later, and having it in a clear way will save you a lot of time reading and wondering what you did, so it's better to be clean) than adding everything inline inside body
As for SEO I believe it's more affected by the use of the elements than having the elements. I mean, if you want some content use instead of a tag that resembles by style to a heading.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 3 years ago.
Improve this question
I was wondering if there are any differences between CSS images and SVGs on your website.
By CSS images I mean images created with divs in HTML and styled in CSS (like this: https://codepen.io/andrewrock/pen/jOEZxrY).
Yes, CSS images are more time consuming, but apart from that they're both animatable, you can use CSS variables on them, make them dynamic with JS, ...
So what are the differences of those 2? (Performance, Rendering, ...)
There are countless reasons why you should use a svg instead of a group of html elements:
Creation
There are hundreds of svg editors that allow in a simple way to realize a drawing or an icon. This is not the case for html. So drawing a building icon in full css would be really painful.
Sharing
The fact that it uses a standardized file such as svg, allows you to export your work to other tools and easily be exploited by someone else. Use tricky css rules to manipulate some span or div can be difficult for a newcomer to your project to understand.
User experience
On a website that use svg, you will able to open it on a new tab or to download it. Thats very comfortable for an user for exemple. If you use html an user will not be able to manipulate and thats can be really annoying
Performance
Because the svg is called most of the time a file you can compressed it on your server to gain more space and performance with some tools like Appendix J
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
Here's the link to the page I made: https://thawing-savannah-89995.herokuapp.com/
This is my first webpage I've made without help using only a PSD.
Here's a SS of the area I'm having issues with and keeps breaking when I shrink the browser size. This layout was very difficult for me to think through and I don't think it should've been. How can I better design the html and CSS for that part?
I don't have enough rep at the time of this post to comment. Sorry, I would if I could.
I suggest using a thing in css called flexbox. It takes a little extra work instead of Bootstrap or 960 or something, but in combination with percentage units, and even maybe vh/vw if you want to be new age.
This guide explains it better than I could ever hope to; basically, it's a dynamic alignment system. Centering is made trivial, compared to the alternatives. Keep in mind, you might need some #media breakpoints, mostly to change the flex-direction.
It has recently gained almost (sorry IE) universal browser support. If you do care about IE, use a shim like flexibility.
If you do want to use bootstrap-like grid systems, there are better alternatives, if you want to look into them. Personally not a fan of bootstrap (anymore...) but whatever floats your boat I suppose.
The best lesson I learned with creating Responsive sites is to design how you want this to look on a mobile device and work your way up to the Desktop.
I can suggest that you use Twitter Bootstap or Foundation as well as downloading responsive templates. Read as many articles you can find about different techniques that you can find to help you best understand the concept of how do to this.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I was able to create a web site 10 years ago with Microsoft Frontpage without learning anything, today with a copy of Adobe Dreamweaver CS6, I can't even figure out a way to change the font size of a simple text. CSS is the thing, so I went through the CSS tutorials in w3 and I get it now. It's a good idea, but It is also a good idea to kill creativity, ie all sites like similar, see screenshot below. It sucks floppy disks.
My questions will be:
Does web 2.0 really kill creativity?
Is there a "modern" web design application that I don't need to go into these CSS thing?
Is there a way to create a circular navigation menu like this using css? I want to have this menu in the middle of the page, and with a button on the corner to activate it.
No it doesn't
You don't have to use CSS. You can use inline styles,
but it won't be right. Using the CSS is a good coding practice and
you just need to learn it better.
Yes. If you google it, you'll find several links. Here is just some examples:
https://css-tricks.com/building-a-circular-navigation-with-css-clip-paths/
http://www.cssscript.com/pure-css-circle-menu-with-css3-transitions-transforms/
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I want to add game like effects to a web app to make it more interactive and fun for the user. Specifically, when someone fills out an answer, I want to have a little character that does a dance, or gold coins pop out - something similar to what you would see in a game.
What is the best way to do this? I'm a little confused on if this is possible through HTML5, or if I still need to work with Flash, or what. I'm not sure of the terminology to use to search for the answer, and so far I've found CSS3 animations and HTML5 vector animations but these aren't exactly what I'm looking for.
I would appreciate any insight, even on just what terms to search for!
Thanks,
Heather
You have many options:
CSS: check this animations effects, and use them wherever you want: https://daneden.github.io/animate.css/
Do not only use them: analyze each animation and learn how do they work. As you see CSS can be quite powerful on animation and does not need much memory to run (important for mobile devices)
jQuery: Once you have get familiar with CSS animations and possibilities, check all the .animation method posibilities from jQuery docs
Its a good way to start.
About very specific and complex things like advanced text animations, I suggest you to search for specific plugins created right for those pruposes. For example, Textillate for text animations, WaitMe for load animations or PACE for loading effects and loading processes.
To finish with, sources like Tympanus are great not ony on downloadable CSS and jQuery code for, for example, button effets, but also as a inspirational source.
Have fun, and always try to inspire yourself, and learn required knowledgements to develop your own effects before copying code.