기본 콘텐츠로 건너뛰기

Borders&Bounderies [Process-coding]


<Coding before changing the design>>

I tried to change the background colours when I hover the text.

Result:




This is the coding I tried to give blend mode effect before realising that I can use the blend mode in CSS


Result:


After I knew that I can use blend mode CSS as well, I applied it and the images/texts were more clear than before

.overlay {
position: absolute;
bottom: 110px;
background: rgb(255, 0, 0);
mix-blend-mode: multiply;
width: 300px;
transition: .5s ease;
opacity: 0;
padding: 300px;
text-align: center;
}
.container:hover .overlay {
opacity: 1;
}




------------------------------------------------------------------------------------------------------------------------------

<< Coding After changing the topic/ design>>


I had difficulty when I had done coding, especially in the third page which has hover effect a lot. In order to check precisely the division of the page, I used background colour and I changed it to what I really want to show after checking like the image below.

-----------------------------------------------------------------------------------------------------------------------------

I used <p> tag and <br> tag when I need to break a line. I did not know the difference between <p> and <br> but I got to know through this project. I wanted to use both tag to see the difference so I used <p> on the left side which is needed to add some space before and after each p element. And I used <br> on the right side which shows year and number since I do not need margin but I need to break the line. 



-----------------------------------------------------------------------------------------------------------------------------

<Hover effect on year images>

I did not split year images and give <class> selector before I noticed the reason why I need it. 
So I used the same class selector, which is "year", in the images from 2011 to 2018. However, I thought I need to give each class selectors to use the hover effect on the numbers that show the statistics.

After that, I experimented in giving the hover effect each image of the year. But it did not work as I expected.

experiment#1 : When I mouse over the image of 2011, the red box image was hidden by the first image. I thought the reason is that I used back ground image.


<img class="year11" src='img/2011.png'> <br>

.year11{
width:31.5px;
vertical-align: middle;
}

.year11:hover{
background-image: url('img/2011-r.png');
}

Result: 👎









experiment#2 : I used <div> tags instead of using <img> and used both background-mage on css. However, it did not work as well. The images disappeared or showed like the images below.

<div class="year11">
<div class="year12">

.year11{
width:31.5px;
background-image: url('img/2011.png');
vertical-align: middle;
}

.year11:hover{
background-image: url('img/2011-r.png');
}

Result: 👎










experiment#3 : The last method was to use <img> tag with <onmouseover> javascript. And it worked properly.


<img class="year11" src='img/2011.png' onmouseover="this.src='img/2011-r.png';"
onmouseout="this.src='img/2011.png';" /> <br>
<img class="year12" src='img/2012.png' onmouseover="this.src='img/2012-r.png';"
onmouseout="this.src='img/2012.png';" /> <br>

.year11{
width:31.5px;
vertical-align: middle;
}

Result: 👍













-----------------------------------------------------------------------------------------------------------------------------

<Changing the colours of the number when mouse over the year>

After I solved the first hover effect, I tried to change the colours of the number when I mouse over each year. 

experiment#1 : I used the code below and I realised that I need to make each division, <div class> for "red colour", "green colour", "blue colour", and "black colour" through this experiment. I still do not know why javascript did not work so I did more research to figure out the problem.


<div class="text4">
12311539212 <div class="hover-2011">22222</div>
31414315392386902221231233333dddddddddd2222</br>
12314143153923869022212312333333</br>
</div>

.text4{
font-size:1.2em; /* 1rem=16px */
font-family: 'Source Sans Pro', sans-serif;
line-height: 30px;
letter-spacing: 1.5px;
}
.hover2011{
float:left;
}

$('.year11').hover(function () {
$(.hover2011).addClass('red');
},
function () {
$(.hover2011).removeClass('red');
});


Result: 👎











experiment#2 : So I divided the number into each colour like "hover-r", "hover-b", "hover-g", "text4-normal"(black) and used "float:left" since paragraph was split when I did not use it. 

<div class="page3-right">
<div class="text4">
<div class="text4-normal">12311539212</div>
<div class="hover-r">22222</div>
<div class="text4-normal">312323231</div>
<div class="hover-b">12313</div>
<div class="text4-normal">33333332222223333</div>
<div class="hover-g">1231312213</div>
</div>
</div>

.text4{
font-size:1.2em; /* 1rem=16px */
font-family: 'Source Sans Pro', sans-serif;
line-height: 30px;
letter-spacing: 1.5px;
}

.text4-normal{
float:left;
}

.hover-r{
float:left;
}

.hover-b{
float:left;
}

.hover-g{
float:left;
}

$(".year11").mouseover(function(){
$(".hover-r").css("color","red");
});$(".year11").mouseout(function(){
$(".hover-r").css("color","black");
});

$(".year11").mouseover(function(){
$(".hover-b").css("color","blue");
});$(".year11").mouseout(function(){
$(".hover-b").css("color","black");
});

$(".year11").mouseover(function(){
$(".hover-g").css("color","green");
});$(".year11").mouseout(function(){
$(".hover-g").css("color","black");
});


Result: 👍 + 👎 : Colours were changed but I found that I need to classify <div class> more like "hover-r" to "hover-r-2011". 














-----------------------------------------------------------------------------------------------------------------------------

In page5, I just used a photo(png) of the graph but I changed my mind to make it interactive using SVG after watching the session in moodle and getting feedback. 

(Design: I made the pie chart in Photoshop first using masking, but it did not work when I open the file in Illustrator. I thought each element will be separated when I use division in Illustrator, but it did not work. So I made a new one.)

After making the pie chart using Illustrator, I saved it as SVG and opened it in the coding program. It was not difficult to save it and open the file since I already experienced with using SVG file for coding when I did IHR exhibit project. However, it was a good experience because I have gone through the whole process(design+coding) by myself. What I learned is that I need to make each element and define the layer name to find easily when I do coding. I filled the colour through using path id and css.


< Show the text when hovering>

I wanted to put the text in the middle of the pie chart but it was not shown when I just wrote the text. So I searched how to use and I found <text> tag (https://stackoverflow.com/questions/28128491/svg-center-text-in-circle/52719480). After applying text tag, I tried to give hover effect but did not work as well. And I found <g>, group element, to use it (https://stackoverflow.com/questions/41768657/display-text-over-svg-element-on-hover).


<g id="g1">
<text id="text-r-1" x="50%" y="50%" text-anchor="middle" stroke="#51c5cf"
stroke-width="0px" dy=".3em" font-size="50px"> 3.07%(169 people) were jailed </text>
<path id="r-1" d="M747.32,313.17,778.87,361A366.07,366.07,0,0,1,988,295.77V238.
46a423.07,423.07,0,0,0-240.68,74.71Z" transform="translate(-416.92 -92.49)" fill="none"
stroke="#000" stroke-miterlimit="10"/>
</g>

path#r-1{
fill: #FF313F;
}
svg #text-r-1 {display: none;}
svg #g1:hover #text-r-1 {display: block;}

-> At first, I used "svg g #g1:hover #text-r-1" because I sometimes use "element #id name" like "img #img1" but it did not work. (I still want to know the difference between them. When does it work properly and why does it not work on G element)

Result: 👍: it worked when I mouse over the red area.


















After that, I tried to apply it to another one which runs against the first one. It means showing the text first and disappearing when I mouse over the areas. 


<text id="text-0" x="50%" y="50%" text-anchor="middle" stroke="#51c5cf"
stroke-width="0px" dy=".3em" font-size="50px"> test </text>

<g id="g1">
<text id="text-r-1" x="50%" y="50%" text-anchor="middle" stroke="#51c5cf"
stroke-width="0px" dy=".3em" font-size="50px"> 3.07%(169 people) were jailed </text>
<path id="r-1" d="M747.32,313.17,778.87,361A366.07,366.07,0,0,1,988,295.77V238.
46a423.07,423.07,0,0,0-240.68,74.71Z" transform="translate(-416.92 -92.49)" fill="none"
stroke="#000" stroke-miterlimit="10"/>
</g>


experiment#1
path#r-1{
fill: #FF313F;
}
svg #text-r-1 {display: none;}
svg #g1:hover #text-r-1 {display: block;}

svg #text-0 {display:block;}
svg #g1:hover #text-0 {display: none;}

experiment#2
path#r-1{
fill: #FF313F;
}
svg #text-r-1 {display: none;}
svg #g1:hover #text-r-1 {display: block;}

svg #text-0 {display:block;}
svg #g1:hover + #text-0 { display: none;}

experiment#3: give another g element 
<g id="g0">
<text id="text-0" x="50%" y="50%" text-anchor="middle" stroke="#51c5cf" stroke-width="0px" dy=".3em" font-size="50px"> test </text>
</g>
<g id="g1">
<text id="text-r-1" x="50%" y="50%" text-anchor="middle" stroke="#51c5cf" stroke-width="0px" dy=".3em" font-size="50px"> 3.07%(169 people) were jailed </text>
<path id="r-1" d="M747.32,313.17,778.87,361A366.07,366.07,0,0,1,988,295.77V238.46a423.07,423.07,0,0,0-240.68,74.71Z" transform="translate(-416.92 -92.49)" fill="none" stroke="#000" stroke-miterlimit="10"/>
</g>

path#r-1{
fill: #FF313F;
}
svg #text-r-1 {display: none;}
svg #g1:hover #text-r-1 {display: block;}

svg #g0 {display: block;}
svg #g1:hover #g0 {display:none;}

Result: 👎: two texts were shown together when I mouse over.

Mouse Out

Mouse Over















experiment#4: I put the text element(text-0), which be shown first when I mouse out, in group tag and changed CSS a little bit as well.

<g id="g1">
<text id="text-0" x="50%" y="50%" text-anchor="middle" stroke="#51c5cf"
stroke-width="0px" dy=".3em" font-size="50px"> test </text>
<text id="text-r-1" x="50%" y="50%" text-anchor="middle" stroke="#51c5cf"
stroke-width="0px" dy=".3em" font-size="50px"> 3.07%(169 people) were jailed </text>
<path id="r-1" d="M747.32,313.17,778.87,361A366.07,366.07,0,0,1,988,295.77V238.
46a423.07,423.07,0,0,0-240.68,74.71Z" transform="translate(-416.92 -92.49)" fill="none"
stroke="#000" stroke-miterlimit="10"/>
</g>








path#r-1{
fill: #FF313F;
}
svg #text-r-1 {display: none;}
svg #g1:hover #text-r-1 {display: block;}

svg #text-0 {display: block;}
svg #g1:hover #text-0 {display:none;}

Result: 👍+👎: It worked when I mouse over the red area but it did not work when I mouse over the bright red area.


  
Mouse Out

Mouse Over red area
Mouse Over the bright red area




I spent almost a week to figure out by myself searching it on google and Stackoverflow that other people posted. I wanted to show the stats and hide the text"5,497 offenders were arrested for Molka in 2018".
But the text kept being shown. I tried to only use CSS and use both CSS and javascript I found on google and Overstackflow but it did not work. What I have done by myself was showing the stats and hiding the text when I hover over the deep red, but the text was shown when I hover another section.  I was considering to give up and use an easier one but I wanted to solve my code. So I asked it on Stackoverflow and I resolved it. (https://stackoverflow.com/questions/66152304/how-can-i-show-and-hide-sibling-element-when-i-mouse-over-in-svg) 


Problem: 

They helped me and explained in an easy way but honestly, I am still confused why it did not work. 

So I am going to study javascript more to understand it entirely. And I want to know why is it not working only using CSS.






< Break line >

A sentence was long to show 



so I tried to use <br> , <p>, &nbsp; but it did not work.

<g id="g2">
<text id="text-0" x="50%" y="50%" text-anchor="middle" stroke="#51c5cf"
stroke-width="0px" dy=".3em" font-size="50px"> </text>
<text id="text-r-2" x="50%" y="50%" text-anchor="middle" stroke="#51c5cf"
stroke-width="0px" dy=".3em" font-size="50px"> 96.3% (5,328 people) <br> were punished
without detention. </text>
<path id="r-2" d="M988.06,295.77c203.16,0,367.86,164.7,367.86,367.86s-164.7,
367.85-367.86,367.85S620.2,866.79,620.2,663.63C620.2,538.18,683,427.4,778.87,361l-31.55-47.
84c-111.39,76.66-184.42,205-184.42,350.46,0,234.81,190.35,425.16,425.16,425.16s425.16-190.
35,425.16-425.16S1222.87,238.46,988.06,238.46H988v57.31Z" transform="translate(-416.92 -92.49)
" fill="none" stroke="#000" stroke-miterlimit="10"/>
</g>


Result: 👎



I put two "text-r-2" tag and change the figure of "y" of each element for space between the lines.

<g id="g2">
<text id="text-0" x="50%" y="50%" text-anchor="middle" stroke="#51c5cf"
stroke-width="0px" dy=".3em" font-size="50px"> </text>
<text id="text-r-2" x="50%" y="48.5%" text-anchor="middle" stroke="#51c5cf"
stroke-width="0px" dy=".3em" font-size="50px"> 96.3% (5,328 people) </text>
<text id="text-r-2" x="50%" y="51.5%" text-anchor="middle" stroke="#51c5cf"
stroke-width="0px" dy=".3em" font-size="50px"> were punished without detention. </text>
<path id="r-2" d="M988.06,295.77c203.16,0,367.86,164.7,367.86,367.86s-164.7,367.
85-367.86,367.85S620.2,866.79,620.2,663.63C620.2,538.18,683,427.4,778.87,361l-31.55-47.
84c-111.39,76.66-184.42,205-184.42,350.46,0,234.81,190.35,425.16,425.16,425.16s425.16-190.
35,425.16-425.16S1222.87,238.46,988.06,238.46H988v57.31Z"
transform="translate(-416.92 -92.49)" fill="none" stroke="#000" stroke-miterlimit="10"/>
</g>


Result: 👍






















댓글

이 블로그의 인기 게시물

Feedback and changes

   [ from mid point presentation ]  I asked 4 questions in the midpoint presentation. Which one do you think good/convenient for users to count the number?(on my sketch) - The reward/benefits section will be a good method to get more people using reusable cups - Hi Min! I think the staff one and scanning the qr code is quite convenient. People counting by themselves might mean people cheat and over exaggerate how many times they've used it  Merge 1&2 100% - I'm not sure, I can see the dilemma, merge 1 & 2 would mean people can't exaggerate (would using one qr code that everyone scans in the store better than a sticker, to save paper?), but if people make their own drink then they can't enter the use, so I would say 3 might be the best I guess you could merge 3 and some elements of 2 as having a qr code could remind people to enter their use when they are in the store - I think it's difficult to have users count their uses themselves. It might be best for ho...

Initial Design + Changes

 1. Start Page [initial] [modified] I changed the first page because the initial one was too simple. I want to highlight the main colour of Ncup by using the colour on the background. 2. Login-Sign Up [initial] [modified] I added sign up and sign in button on each sign in and sign up apge. 3. Register cup  [initial] At first, uploading the photo was just optional, and I wanted that users can see the photo before clicking 'done' button. But I got feedback from Armando that it looks more proper on the web, not the app. So I changed the button. [1st modified] I changed like the photo above, like big plus button and cancel button and put 'preview' function. But I did not like it. [final] It is the final design. While modifying the design and function, there were some changes in function. Like it is no more optional to upload the photo of tumblers. Because I thought staff in cafe need to check the tumbler image when they scan it. And I coloured green on the top background. 4...