본문 바로가기

css3

새로운 셀프고문 방법 - 이글루스 스킨만들기 이글루스 스킨을 만드는 것은 고문과도 같기 때문에 일종의 가학성(?) 행위에 가깝다고 봐도 될듯. 새로만든 스킨. Full bleed layout과 fixed top menu, dropdown menu를 제공한다. 레이아웃 제한 때문에 fixed top menu는 거의 이글루스로 치면 차세대급 기술. 발단은 이렇다. 요즘 웹디자인 트랜드는 Full bleed layout이다. 즉, 텍스트는 읽기 쉬운 너비인 600~700px을 유지하되, 사진은 최대한 크게 뿌려주는 형태의 디자인이다. 미디움도 이러한 형태를 사용하고 있으며, 많은 미니 블로그 시스템들이 이와 유사한 형태의 스타일을 제공한다. Hassle-free Full Bleed with *:not()Breaking out of container DI.. 더보기
이글루스 코드 제한에 딱 맞춘 CSS3 스킨 - Frosty 매번 스킨 만들때마다 느끼는 것이지만 CSS 글자수 제한 어떻게 안되나? 건의 한지가 언젠데 발전이 없는 것을 보면 이글루스 운영진은 티스토리보다 더 노답인듯. 덕분에 만들어 놓은 스타일도 글자수 제한으로 밀어버리고 새로 만드는 병크를 저질렀다. 글자수 제한 때문에 스킨 옵션에서 배경이미지 또는 헤더 이미지 둘중에 하나만 넣을 수 있다. 둘다 넣을 경우 잘린다. 사실 배경 이미지만 넣어도 일부 코드가 잘리지만 위치 설정용 코드만 잘리기 때문에 별 문제는 없다. (position 코드의 경우 전부 오버라이드됨. 헤더는 해당사항 없음.) 특징 CSS3을 사용하여 만들어진 스킨으로 표준 요소와 비표준 요소가 적절히 섞여있어 브라우저마다 다르게 보이는 스팩타클함을 자랑한다. 아마도 2년이내에는 모든 브라우저에서.. 더보기
CSS3의 새로운 효과와 스케치 목업으로 간단한 스킨 만들기 - 이글루스 스킨 Frosty CSS만 작성하면 스킨이 나오는 이글루스로 간단하게 만들어보았다. 제작시간: 약 하루? 어제 반나절 + 오늘 반나절 스케치로 만든 목업이다. 사용후기는 여기를 참고 그냥 평범한 1140 그리드 스킨이다. 딱 보면 느낌 알겠지만 반응형이 아니다. (애초에 지원할 이유도 없음)대신에 실험삼아 요새 핫한(?) CSS3 태그를 써 보았다. Backdrop filter 조니 아이브의 주도 하에 애플 제품군에는 새로운 디자인 언어가 적용되었다. 플렛 디자인이라고 불리는 이것은 기존의 실물을 흉내내던 스큐어모픽과는 달리 형광톤의 컬러와 블러 레이어를 통해 경계를 나누는 방식이다. 이후 iOS와 macOS의 서리낀 유리효과를 표현하고자 수많은 웹개발자들이 삽질에 삽질을 거듭하였다.물론 현재 쓰고 있는 XP1에도 검색창.. 더보기
Burari² - 에디션2 Burari"²"의 에디션"2" 이다. (콩콩) 테마 다운로드 설치 방법은 기존과 완전히 동일하다. 기존 테마 설치 방법 업데이트 로그 - 소소한 버그 픽스- 웹폰트 로드 문제 수정- 레이아웃 변경- 테블릿(아이패드)에서 깨지는 문제 수정 시간나면 커피한잔 이라도 사주는 센스 더보기
Burari² 두번째 베리에이션 스퀘어스페이스 공식 블로그 덕분에 흥해진 50:50 레이아웃을 적용해 보았다. 무언가 급진적인 레이아웃을 좋아하는 사람에게 유용할 듯. 사실 풀 스크린 슬라이더를 부담스러워 하는 사람들도 꽤 되어 이런 추가 레이아웃을 만들어 보았다. 더보기
마이피 테마 - Burari² 지금으로 부터 무려 3년여전. 첫 마이피 테마를 만들었다. 이름은 Burarikun. (이름은 특정인물의 그것과 아무런 관련이 없음) 이후 군머도 다녀오고 많은 시간이 흐른 지금 다시 테마 제작에 도전했다. Burarikun - 루리웹 마이피용 CSS3 스타일 괴랄한 테이블 레이아웃은 flex-box를 사용해서 전부 박살냈다. Burari²는 1단형 레이아웃 이지만 원한다면 언제든지 2단, 3단으로 개조할 수도 있으며 사용자의 취향에 따라 사이드 바의 위치도 마음대로 바꿀 수 있다. (이것이 바로 flexbox의 힘!!) CSS3 표준 준수 기본적으로 마이피에서 제공되는 모든 요소에는 스타일이 적용되어 있으며, 불가능할 것 같았던 input image 버튼도 마개조를 시켰다. 방명록도 별도의 스타일이 적.. 더보기
루리웹 마이피 테마 alpha 아직 이름도 못 지었다. 지난번께 '부라리큰'이었으니 이번에는 부라리²로 할까 생각중.관련글: Burarikun - 루리웹 마이피용 CSS3 스타일 근근웹 마이피는 2016년에 무!려! 테이블 레이아웃을 사용하고 있다. 2013년에 스킨만들때는 float가지고 테이블 속성 뭉개고 다녔지만 지금은 flex-box가 도입되어 레이아웃 짜는데 40분도 채 안걸렸다. 근근웹 마이피는 자바스크립트를 지원하지 않기 때문에 상식선에서는 슬라이더를 넣을 수가 없다. 하지만 의지의 둠반도인은 포기하지 않는다! 근성으로 CSS3으로만 동작하는 슬라이더를 넣었다. 그럭저럭 봐줄만 하다. 더 화려하게 꾸미고 싶긴한데 지저분 해질까봐 이 이상 못 건드리겠음... 조만간 배포 예정. 더보기
Asterisk 1.0.0 공개 얼마간의 테스트 기간을 거친 후 정식 공개를 하게 되었다. 이글루스 스킨은 노가다에 비해 결과물이 영 별로라서 도무지 의욕이 솟지 않는다. 본 스킨은 CSS3 스팩을 완벽하게 지원하는 스킨이다. HTML이야 뭐 있으나 마나 한 것이라서 그냥 패스. 이번 스킨의 가장 큰 특징은 이글루스에서 기본으로 제공하는 스킨인 오른쪽 사이드바 가로 해상도 100%의 뼈대를 그대로 사용해서 거의 모든 기능을 다 지원 한다. 헤더의 이미지 변경 가능 (다만 배경 타입은 cover로 고정된다) 헤더는 짭퉁 페럴랙스를 지원한다. 자바스크립트를 못 쓰니 진짜 페럴랙스는 그림의 떡 배경 이미지를 바꾸는 것도 가능하다. 근데 정말 쓸데 없는 기능인건 사실. 역시나 이것도 cover로 고정된다. CSS로 건드릴수 있는 거의 모든 부.. 더보기
새로운 시도 - XP1 1.0.0a 테스트 블로그에서는 엄청난 버전업을 하였지만 주사용 블로그에 처음으로 적용하는 것을 버전 1로 사용했다. 1.0.0 알파 버전이며, 최대한 버그를 많이 잡는다고 잡았는데도 여전히 버그가 산더미 처럼 나오고 있다. (...) 원래 4월에 작성한 글인데 적다보니 끝도 없이 글을 쓰게 되어서 발행을 치일피일 미루다 이제서야 올린다. XP1 이라는 이름의 기원사실 프로토타입이라는 단어를 굉장히 자주 썼다. 3번째 만든 자작스킨의 이름도 프로토타입이다. 실험정신이 투철하다 보니 이것저것 이상한 것 집어넣고 정당하기 위함 일까? 본 스킨에 쓰인 XP라는 이름의 근원은 윈도XP가 아니다. 윈도XP는 eXPerience의 준말이다. EXP라고 하면 경험치같아 보일까봐 XP라고 지은게 아닐까. 윈도우 경험치 에디션. X.. 더보기
Asterisk* - 이글루스 스킨 [WIP] WIP... 이틀 걸림 이글루스 시스템 개똥같음 으으... 더보기