CODE CAVE

CSS 만으로 말풍선 만들기 본문

Web/Front-End

CSS 만으로 말풍선 만들기

코드케이브 2016. 7. 18. 15:49

말풍선 스타일도 참 여기저기 많이 쓰이죠~


저도 일반적으로 포토샵을 활용하여 이미지로 만들어서 썼었는데 


이게 단점이 텍스트 양에 따라서 이미지 사이즈가 조정되어 좀 귀찮은 작업들을 해야한다는 단점과


위에서 색상이라도 바꾸자고 하면 포토샵에서 또 새로 색 입히고 다시 자르고 이미지 폴더에 덮어쓰기하고....


별로 디자인 할 필요도 없는 간단한 말풍선이라면 더더욱 짜잘한 수정사항이 짜증나질 수 있죠..


아무튼 여러모로 매우 귀찮습니다! 이런 말풍선 정도는 CSS로 만들 수 없을까?? 생각하다가 찾아봤는데


말풍선, CSS로 만들 수 있습니다!! 네! 찾았습니다!


그것도 바로 실무에서 복붙할 수 있도록 말풍선 CSS를 만들어주는 사이트가 있어서 소개해드립니다.



전 이 사이트의 스타일 고대로 가져와서 몇가지만 수정해서 쓰고 있습니다 ㅎㅎ


before와 after 속성을 활용 했더군요



그럼 링크 남겨드릴게요~


http://www.cssarrowplease.com/




도움이 되셨다면 아래 공감 버튼을 꾹!