Notices
For all updates, view the main page.

The Lab From the computer lab to the chemistry lab, or even the observatory, here's where we nerd out over all things science and technology!

Reply
 
Thread Tools
  #851    
Old January 27th, 2016 (6:19 AM).
Dusty's Avatar  
Join Date: Dec 2013
Location: Out Of My Mind
Nature: Relaxed
Posts: 395
Is there some way to use CSS to play a GIF once when moused over?
__________________
Reply With Quote

Relevant Advertising!

  #852    
Old January 27th, 2016 (6:26 AM).
Fletch's Avatar
the fruit pokémon
 
Join Date: Feb 2014
Location: newcastle
Age: 20
Gender: Male
Nature: Lax
Posts: 4,938
Send a message via Skype™ to Fletch
Is there anyway to css an image map? I really want all the idvidiual parts of my signature to be links
__________________
Tsareena
pc twitterpair 1pair 2
Reply With Quote
  #853    
Old February 19th, 2016 (7:59 PM).
Vendily's Avatar
Making BW-style OWs for RMXP
 
Join Date: Aug 2015
Gender: Female
Nature: Calm
Posts: 615
You can use border-image on PC.
Placeholder


-webkit- and -o- are just for backwards compatibility.

HTML Code:
[cd="border: 10px solid transparent; padding: 10px; -webkit-border-image: url('http://i.imgur.com/9LbRgtc.png') 8 stretch; -o-border-image: url('http://i.imgur.com/9LbRgtc.png') 8 stretch; border-image: url('http://i.imgur.com/9LbRgtc.png') 8 stretch; background-color: #FFFDFE; width: 120px"]Placeholder[/cd]
__________________
Resources for ROM hackers has moved.

Reply With Quote
  #854    
Old February 19th, 2016 (8:41 PM).
Sopheria's Avatar
響け〜 響け!
Crystal Tier
 
Join Date: Nov 2013
Location: 深き海の彼方
Gender: Female
Nature: Modest
Posts: 4,932
Quote:
Originally Posted by STARDU5T View Post
Is there some way to use CSS to play a GIF once when moused over?
Not with the css we're limited to in posts. A gif doesn't have pause or play controls, unless you have browser plugins that make it possible. The closest you could come to doing it via css would be to hack it in with a :hover selector, which we unfortunately don't have access to in forum css :/

Quote:
Originally Posted by Eros View Post
Is there anyway to css an image map? I really want all the idvidiual parts of my signature to be links
You could crop your signature image into several individual images. That way you'd be able to apply a link to each image
__________________
Paired with Dragon and Koakuma

Reply With Quote
  #855    
Old February 20th, 2016 (12:59 PM).
Vendily's Avatar
Making BW-style OWs for RMXP
 
Join Date: Aug 2015
Gender: Female
Nature: Calm
Posts: 615
Continuing on my quest to find properties that work on PC, check out this!
The transform property works!


Texts


HTML Code:
[cd=" width: 200px; height: 100px; background-color: yellow; -ms-transform: rotate(7deg); -webkit-transform: rotate(7deg); transform: rotate(7deg);"] Texts[/cd]
I know for a fact that rotate(angle) and scale(x,y) work.
__________________
Resources for ROM hackers has moved.

Reply With Quote
  #856    
Old February 21st, 2016 (7:41 AM).
Incineroar's Avatar
the [christmas] spirit of the fighter
Moderator
 
Join Date: May 2009
Location: Iki Town
Age: 21
Gender: Male
Nature: Brave
Posts: 12,948
Yeah, as long as it's a CSS property and not HTML, it should work. I'm not aware of any restrictions for the CSS tags.
__________________
Incineroar
the labpmalt
pair 1pair 2twitter

on reduced activity
Reply With Quote
  #857    
Old April 12th, 2016 (7:40 AM).
Lucario's Avatar
The aura guardian awakens....
 
Join Date: Feb 2016
Location: The Tree of beginning
Gender: Male
Nature: Relaxed
Posts: 634
Quick tip for a scrolling background image: just put
Code:
background-attachment:fixed;background-repeat:no-repeat
in with your background image code.
__________________
Reply With Quote
  #858    
Old June 8th, 2016 (7:47 PM).
Syvelocin's Avatar
Eevee Breeder
 
Join Date: Oct 2010
Location: Oregon
Age: 21
Gender: Female
Nature: Quirky
Posts: 184
I'm having a really hard time here lol. I can't get this to center. I would like to have it in the middle of the screen.

Rules and Information
text text
text text
text text
text text
text text
text text
text text
text text
text text
text text
text text
text text
text text
text text
text text
__________________
Syvelocin's Pokémon Nursery
Reply With Quote
  #859    
Old June 8th, 2016 (7:57 PM).
Giggleswee's Avatar
[Screaming in emoji]
Silver Tier
 
Join Date: May 2016
Location: Georgia
Age: 19
Gender: Female
Nature: Bashful
Posts: 172
Quote:
Originally Posted by Syvelocin View Post
I'm having a really hard time here lol. I can't get this to center. I would like to have it in the middle of the screen.

Rules and Information
text text
text text
text text
text text
text text
text text
text text
text text
text text
text text
text text
text text
text text
text text
text text
One thing, position: center isn't a thing. It's either position: absolute, position: fixed, position: relative or position: static. ( http://www.w3schools.com/cssref/pr_class_position.asp )

If you want to center the whole thing you need to add in the first box
Code:
margin:0 auto;
This (almost) always centers things (at least on this forum where some themes break css >.<)

Protip: This only works when the div has a initial size set
Reply With Quote
  #860    
Old June 8th, 2016 (8:17 PM).
Syvelocin's Avatar
Eevee Breeder
 
Join Date: Oct 2010
Location: Oregon
Age: 21
Gender: Female
Nature: Quirky
Posts: 184
Ah thanks, perfect. I haven't used any tutorials but I was looking at a few examples of some code to figure out how to do similar things and it used position: center without margin: 0 auto and the post was centered. I wonder why that code was there then.
__________________
Syvelocin's Pokémon Nursery
Reply With Quote
  #861    
Old August 6th, 2016 (7:31 PM).
RoadMart's Avatar
NOT Evil or Suspicious at all Alien Space Ferret
 
Join Date: Aug 2016
Location: Aomori, Japan
Gender: Female
Nature: Naughty
Posts: 242
Hello everyone! I was wondering if someone could help me figure out this one code.

So far I've got the gist of using CSS, but the one thing I can't figure out is how to make two boxes float next to each other like in this example trade thread CSS (the "Wants" and "Trophy Case" boxes). I thought it was the float code, but when I used it my two boxes went all the way to the edge like this. Is there some sort of limit I have to set so it stays in line with the other boxes?

Maybe a dumb question but I can't seem to figure out where I'm messing up. Thanks in advance! @w@
__________________












Trade Thread | Japan (GMT+9) | Dex Tracker
Reply With Quote
  #862    
Old August 7th, 2016 (9:18 AM).
Venia Silente's Avatar
Worrisome, but also Charming
 
Join Date: Oct 2008
Location: behind that truck
Gender: Male
Nature: Timid
Posts: 536
For floating two boxes next to each other, you need to give them and the boxes right below extra information, so you'll find yourself using css-div.

Quote this post and check the CSS code to see the example I give here. These are, more or less, the keys to aligning floating boxes properly:

* Float all boxes, or float none.
* To align N boxes, float (N-1) of them left and the last of them right, or the first of them left and the other (N-1) of them right.
* After the floating boxes, add an empty box with the css-div content: [css-div="float: clear; clear:both;"][/css-div]. This disables the floating of elements (so that the following boxes don't get mixed into all of this)
* In what regards to PokéCommunity CSS code: the css-divs contaning each floated box need to be contiguous, in that you don't break a line when finishing one to start the next. if you add a line break, the line break will also count in the floating elements.

Example follows:


Box One, not floated, main content. Here I talk about life, love, pizza and CSS.

Floated box numero uno, this one floats to the left and should stick by the other's side. Give this box a width (width or max-width property) so that the browser knows how to align the content.
Floated box numero dos, this one floats to the right and should stick by the other's side. This box need to have a width set so that added with the other one they don't go above 100%. In this example, both boxes have a max-width of 49%.
(This small box doesn't need to hold any actual content inside, it's there only for the next content to align correctly to the two boxes; all that matters is that you use the "float:clear; clear:both" CSS tags.)

Box Two, not floated, main content. Here I mostly part goodbye with the post and stuff.




This is what happens if you add linebreaks between the css-div tags:


Box One, not floated, main content, pretty much the same treatment as in the above example.

Floated box to the left, with content and stuff.

Floated box to the right, with content and stuff.

(Clearing box)

Box Two, not floated, main content. Same treatment as in the above example.

__________________
Venia Silente' - Consulting Worldbuilder
Image will go here...
one day.

The Suocéverse - Pokémon Stuff

Introduction – Devel Docs -- FF.net
: Playfield SWC : Pseudo-Legendary : Misaimed for Life SWC
Silly human, romance is for Nidoran!
Overlord : As They Were SWC : Interim (TBA)
And others
OTHER STUFF

[Nothing Yet]

Reply With Quote
  #863    
Old August 7th, 2016 (4:24 PM).
RoadMart's Avatar
NOT Evil or Suspicious at all Alien Space Ferret
 
Join Date: Aug 2016
Location: Aomori, Japan
Gender: Female
Nature: Naughty
Posts: 242
OHH this makes perfect sense! I got it to work perfectly!! Apologies for the long explanation required, but thanks a ton for the help! c:
__________________












Trade Thread | Japan (GMT+9) | Dex Tracker
Reply With Quote
  #864    
Old August 24th, 2016 (8:04 AM).
Josephine's Avatar
Crystal Tier
 
Join Date: Mar 2004
Posts: 1,438
lately i've been using zoom and width to manipulate things you normally wouldn't be able to.

Here's a larger version of the soundcloud player:

Code:
[cd="width: 65%;overflow: hidden;border-bottom: 1px #e5e5e5 solid;background:#f5f5f5;-webkit-box-shadow:inset 0px 0px 0px 1px #e5e5e5;"][cd="padding-top: 1px;height: 165px;width: 200%;border-top: solid 1px #e5e5e5;border-radius: 18px;"][cd="margin-top: -1px;zoom: 2;"][soundcloud]https://soundcloud.com/palettes/uandme[/soundcloud][/cd][/cd][/cd]
original for reference:

Reply With Quote
  #865    
Old September 8th, 2016 (5:53 AM).
Lucario's Avatar
The aura guardian awakens....
 
Join Date: Feb 2016
Location: The Tree of beginning
Gender: Male
Nature: Relaxed
Posts: 634
Hi, I have this image:


I'd like to put my signature inside it, like this terrible mockup:



Is it possible to do this with PC's CSS, so that the text is actual text and the links are clickable?
__________________
Reply With Quote
  #866    
Old September 8th, 2016 (1:29 PM).
Incineroar's Avatar
the [christmas] spirit of the fighter
Moderator
 
Join Date: May 2009
Location: Iki Town
Age: 21
Gender: Male
Nature: Brave
Posts: 12,948
Quote:
Originally Posted by Lucario View Post
Hi, I have this image:


I'd like to put my signature inside it, like this terrible mockup:



Is it possible to do this with PC's CSS, so that the text is actual text and the links are clickable?
You should be able to, just have one div that holds the image (But make sure the inside is transparent so you can use a background-color attribute, or else add the color in an image editor) and inside that div place all your text and links.
__________________
Incineroar
the labpmalt
pair 1pair 2twitter

on reduced activity
Reply With Quote
  #867    
Old September 8th, 2016 (8:56 PM).
Lucario's Avatar
The aura guardian awakens....
 
Join Date: Feb 2016
Location: The Tree of beginning
Gender: Male
Nature: Relaxed
Posts: 634
Quote:
Originally Posted by Team Fail View Post
You should be able to, just have one div that holds the image (But make sure the inside is transparent so you can use a background-color attribute, or else add the color in an image editor) and inside that div place all your text and links.
The thing I can't work out now is how to position the text inside the image, by default it is placed underneath the image.
__________________
Reply With Quote
  #868    
Old September 9th, 2016 (6:23 PM).
anesthesia's Avatar  
Join Date: Jul 2011
Age: 22
Gender: Female
Nature: Sassy
Posts: 1,332
Quote:
Originally Posted by Lucario View Post
The thing I can't work out now is how to position the text inside the image, by default it is placed underneath the image.
Mind posting what you have so far?
Reply With Quote
  #869    
Old September 10th, 2016 (10:02 AM).
Josephine's Avatar
Crystal Tier
 
Join Date: Mar 2004
Posts: 1,438
Quote:
Originally Posted by Lucario View Post
The thing I can't work out now is how to position the text inside the image, by default it is placed underneath the image.
First of all you want to fill in that transparent background in your image:



then you want to create a div with that as the background image:

Lucario

Code:
[cd="width:653px;height:141px;background-image:url('http://i.imgur.com/BJfd5q8.png');"]Lucario[/cd]
as you can see your text is now overlayed on the image.

to position and format the text you'd then replace 'Lucario' with something like:
Code:
[cd="text-align: center;letter-spacing: 1px;"][cd="color: orange;font-size: 1.7em;padding-top: 20px;"]Lucario[/cd][cd="a;color: white;font-size: 1.25em;padding-top: 25px;"][URL="#"][COLOR="Blue"]Blog[/COLOR][/URL] | [URL="#"][COLOR="blue"]Soundcloud[/COLOR][/URL] | "[quote of the day]"[/cd][/cd]
which would give you this:

Lucario
Blog | Soundcloud | "[quote of the day]"

to center this just wrap it in [center] tags
Reply With Quote
  #870    
Old September 10th, 2016 (12:07 PM).
Lucario's Avatar
The aura guardian awakens....
 
Join Date: Feb 2016
Location: The Tree of beginning
Gender: Male
Nature: Relaxed
Posts: 634
Quote:
Originally Posted by Josephine View Post
First of all you want to fill in that transparent background in your image:



then you want to create a div with that as the background image:

Lucario

Code:
[cd="width:653px;height:141px;background-image:url('http://i.imgur.com/BJfd5q8.png');"]Lucario[/cd]
as you can see your text is now overlayed on the image.

to position and format the text you'd then replace 'Lucario' with something like:
Code:
[cd="text-align: center;letter-spacing: 1px;"][cd="color: orange;font-size: 1.7em;padding-top: 20px;"]Lucario[/cd][cd="a;color: white;font-size: 1.25em;padding-top: 25px;"][URL="#"][COLOR="Blue"]Blog[/COLOR][/URL] | [URL="#"][COLOR="blue"]Soundcloud[/COLOR][/URL] | "[quote of the day]"[/cd][/cd]
which would give you this:

Lucario
Blog | Soundcloud | "[quote of the day]"

to center this just wrap it in [center] tags
Thanks!
__________________
Reply With Quote
  #871    
Old September 10th, 2016 (2:17 PM).
Josephine's Avatar
Crystal Tier
 
Join Date: Mar 2004
Posts: 1,438
Quote:
Originally Posted by Lucario View Post
Thanks!
don't forget to fix those links ;]
Reply With Quote
Reply
Quick Reply

Sponsored Links
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT -8. The time now is 9:41 AM.